89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
import { PageHero } from "@/components/page-hero"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { getCardsByCategory, getCategoryBySlug, categories } from "@/data/cards"
|
|
import { notFound } from "next/navigation"
|
|
import Link from "next/link"
|
|
|
|
export function generateStaticParams() {
|
|
return categories.map((category) => ({
|
|
slug: category.slug,
|
|
}))
|
|
}
|
|
|
|
export default function CategoryPage({ params }: { params: { slug: string } }) {
|
|
const category = getCategoryBySlug(params.slug)
|
|
|
|
if (!category) {
|
|
notFound()
|
|
}
|
|
|
|
const categoryCards = getCardsByCategory(params.slug)
|
|
|
|
return (
|
|
<>
|
|
<PageHero
|
|
title={category.name}
|
|
breadcrumbs={[
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Our Cards", href: "/our-cards" },
|
|
]}
|
|
/>
|
|
|
|
<main className="flex-1">
|
|
<section className="py-16">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-12">
|
|
<p className="text-lg text-muted-foreground max-w-3xl mx-auto">{category.description}</p>
|
|
<p className="text-sm text-muted-foreground mt-4">
|
|
{categoryCards.length} {categoryCards.length === 1 ? "design" : "designs"} available
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{categoryCards.map((card) => (
|
|
<Link key={card.id} href={`/card/${card.id}`}>
|
|
<Card className="h-full hover:shadow-lg transition-shadow group cursor-pointer">
|
|
<CardContent className="p-0">
|
|
<div className="aspect-[3/4] relative overflow-hidden rounded-t-lg bg-muted">
|
|
<img
|
|
src={card.image || "/placeholder.svg"}
|
|
alt={card.name}
|
|
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="p-4">
|
|
<div className="flex items-start justify-between gap-2 mb-2">
|
|
<h3 className="text-lg font-semibold leading-tight">{card.name}</h3>
|
|
{card.price > 0 ? (
|
|
<Badge variant="secondary" className="shrink-0">
|
|
${card.price.toFixed(2)}
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="shrink-0">
|
|
Inquire
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mb-2">Order Code: {card.orderCode}</p>
|
|
{card.description && (
|
|
<p className="text-xs text-muted-foreground mt-2 italic">{card.description}</p>
|
|
)}
|
|
{card.variants && card.variants.length > 0 && (
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Also available: {card.variants.join(", ")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|