this repo has no description
www.baileykane.co/
Change from class to function. Update styling
+22
-19
+22
-19
components/HomeSectionItem.js
+22
-19
components/HomeSectionItem.js
···
1
1
import Link from "next/link";
2
-
import { Component } from "react";
3
2
import SectionItem from "./SectionItem";
4
3
5
-
export default class HomeSectionItem extends Component {
6
-
render() {
7
-
return (
8
-
<Link href={this.props.link} passHref>
9
-
<SectionItem className="group transition hover:scale-105 p-2 cursor-pointer grid grid-cols-4">
10
-
<div className="self-center col-span-3">
11
-
<h3 className="mb-1">{this.props.name}</h3>
12
-
<p className="text-stone-700 font-light dark:text-stone-100">
13
-
{this.props.description}
14
-
</p>
15
-
</div>
16
-
<div className="text-3xl justify-self-end self-center pr-3 group-hover:animate-spin">
17
-
{this.props.emoji}
18
-
</div>
19
-
</SectionItem>
20
-
</Link>
21
-
);
22
-
}
4
+
export default function HomeSectionItem({
5
+
link,
6
+
name,
7
+
description,
8
+
emoji,
9
+
className,
10
+
}) {
11
+
return (
12
+
<Link href={link} passHref>
13
+
<SectionItem
14
+
className={`${className} border-stone-800 dark:border-stone-200 group transition hover:scale-105 p-2 cursor-pointer grid grid-cols-4`}
15
+
>
16
+
<div className="self-center col-span-3">
17
+
<h3 className="mb-1 font-bold">{name}</h3>
18
+
<p className="text-stone-700 dark:text-stone-100">{description}</p>
19
+
</div>
20
+
<div className="text-3xl justify-self-end self-center pr-3 group-hover:animate-spin">
21
+
{emoji}
22
+
</div>
23
+
</SectionItem>
24
+
</Link>
25
+
);
23
26
}