this repo has no description
www.baileykane.co/
Remove, as features were updated in later versions of react and the resulting component was just a style wrapper
-34
-34
components/SectionItem.js
-34
components/SectionItem.js
···
1
-
import React from "react";
2
-
3
-
/*
4
-
Functional component, wrapped in React.forwardRef. Generally following this guide:
5
-
https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-function-component
6
-
7
-
{onClick, href, ...props} -> This is the object of props, being passed to the function.
8
-
...props passes all other props, outside of those explicitly mentioned. Importantly,
9
-
this includes props.children.
10
-
11
-
Specifying each of these in the parent div **is required**, otherwise they don't pass
12
-
to the children correctly, and the links don't work.
13
-
14
-
hover:from-purple-200 hover:to-orange-200 hover:dark:from-purple-700 hover:dark:to-orange-500
15
-
*/
16
-
17
-
const SectionItem = React.forwardRef(({ onClick, href, ...props }, ref) => {
18
-
return (
19
-
<div
20
-
className={`${props.className} rounded-lg
21
-
bg-gradient-to-r from-purple-200 to-orange-100 dark:from-purple-500 dark:to-orange-300
22
-
border border-stone-800 dark:border-stone-200
23
-
shadow-md hover:shadow-lg
24
-
`}
25
-
ref={ref}
26
-
href={href}
27
-
onClick={onClick}
28
-
>
29
-
{props.children}
30
-
</div>
31
-
);
32
-
});
33
-
34
-
export default SectionItem;