this repo has no description
www.baileykane.co/
Use section-item styling instead of SectionItem component
+10
-14
+3
-4
components/HomeSectionItem.js
+3
-4
components/HomeSectionItem.js
···
1
1
import Link from "next/link";
2
-
import SectionItem from "./SectionItem";
3
2
4
3
export default function HomeSectionItem({
5
4
link,
···
10
9
}) {
11
10
return (
12
11
<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`}
12
+
<div
13
+
className={`${className} section-item border-stone-800 dark:border-stone-200 group transition hover:scale-105 p-2 cursor-pointer grid grid-cols-4`}
15
14
>
16
15
<div className="self-center col-span-3">
17
16
<h3 className="mb-1 font-bold">{name}</h3>
···
20
19
<div className="text-3xl justify-self-end self-center pr-3">
21
20
{emoji}
22
21
</div>
23
-
</SectionItem>
22
+
</div>
24
23
</Link>
25
24
);
26
25
}
+2
-3
components/MusicItem.js
+2
-3
components/MusicItem.js
···
1
1
import { Component } from "react";
2
2
import { micromark } from "micromark";
3
-
import SectionItem from "./SectionItem";
4
3
5
4
export default class MusicItem extends Component {
6
5
getContentBytype(type, embedUrl) {
···
37
36
38
37
render() {
39
38
return (
40
-
<SectionItem className="flex flex-col transition divide-y divide-purple-300">
39
+
<div className="section-item flex flex-col transition divide-y divide-purple-300">
41
40
<div className="group font-serif text-lg hover:underline">
42
41
{this.props.info.linkUrl ? (
43
42
<a
···
92
91
<></>
93
92
)}
94
93
</div>
95
-
</SectionItem>
94
+
</div>
96
95
);
97
96
}
98
97
}
+2
-3
components/ProjectSectionItem.js
+2
-3
components/ProjectSectionItem.js
···
1
1
import Link from "next/link";
2
-
import SectionItem from "./SectionItem";
3
2
4
3
export default function ProjectSectionItem({ project }) {
5
4
const { title, description, previewImage, date, emoji, slug } = project;
···
9
8
return (
10
9
<div>
11
10
<Link href={"/projects/" + slug} passHref>
12
-
<SectionItem className="group transition hover:scale-105 cursor-pointer grid grid-cols-4 divide-y divide-stone-800 dark:divide-stone-200">
11
+
<div className="section-item group transition hover:scale-105 cursor-pointer grid grid-cols-4 divide-y divide-stone-800 dark:divide-stone-200">
13
12
<div className="col-span-4 grid grid-cols-4">
14
13
<div className="p-2 self-center col-span-3">
15
14
<p className="mb-1 text-stone-700 dark:text-stone-100 font-light text-sm">
···
36
35
/>
37
36
</div>
38
37
)}
39
-
</SectionItem>
38
+
</div>
40
39
</Link>
41
40
</div>
42
41
);
+3
-4
components/RecipeSectionItem.js
+3
-4
components/RecipeSectionItem.js
···
1
1
import Link from "next/link";
2
2
import { Component } from "react";
3
-
import SectionItem from "./SectionItem";
4
3
import Image from "next/image";
5
4
6
5
export default class RecipeSectionItem extends Component {
7
6
render() {
8
7
return (
9
8
<Link href={this.props.link} passHref>
10
-
<SectionItem
11
-
className="h-32 sm:h-96 w-full sm:flex sm:flex-col grid grid-cols-3
9
+
<div
10
+
className="section-item h-32 sm:h-96 w-full sm:flex sm:flex-col grid grid-cols-3
12
11
group cursor-pointer transition hover:scale-105
13
12
sm:divide-y divide-x sm:divide-x-0 divide-stone-800 dark:divide-stone-100
14
13
overflow-hidden"
···
31
30
alt={`Thumbnail of ${this.props.name}`}
32
31
></Image>
33
32
</div>
34
-
</SectionItem>
33
+
</div>
35
34
</Link>
36
35
);
37
36
}