33 lines
912 B
TypeScript
33 lines
912 B
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { CATEGORIES, slugifyCategory } from "./categories";
|
|
|
|
export default function CategoryGrid() {
|
|
return (
|
|
<div className="section section--categories">
|
|
<div className="container">
|
|
<div className="section__header section__header--center">
|
|
<h2>Shop by Category</h2>
|
|
</div>
|
|
<div className="grid-4">
|
|
{CATEGORIES.map((c) => (
|
|
<Link
|
|
key={c}
|
|
href={`/category/${slugifyCategory(c)}`}
|
|
className="cat-card"
|
|
aria-label={c}
|
|
style={{
|
|
backgroundImage: `url(/categories/cat-${slugifyCategory(c)}.png)`,
|
|
}}
|
|
>
|
|
<div className="cat-card__overlay" />
|
|
<div className="cat-card__label">{c}</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|