72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { getProducts } from "@/lib/woocommerce";
|
|
import Header from "@/components/layout/Header";
|
|
import Footer from "@/components/layout/Footer";
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
// Disable static generation - this page will be server-rendered
|
|
export const generateStaticParams = undefined;
|
|
|
|
export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
|
|
const { slug } = await params;
|
|
let product = null;
|
|
|
|
try {
|
|
const products = await getProducts();
|
|
product = products.find((p) => (p.slug || p.id.toString()) === slug);
|
|
} catch (e) {
|
|
// Fallback
|
|
}
|
|
|
|
if (!product) {
|
|
return (
|
|
<main className="min-h-screen">
|
|
<Header />
|
|
<div className="pt-24 text-center">
|
|
<h1 className="text-2xl">Product not found</h1>
|
|
</div>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const image = product.images?.[0]?.src || '/placeholder.jpg';
|
|
const price = product.sale_price || product.price;
|
|
|
|
return (
|
|
<main className="min-h-screen">
|
|
<Header />
|
|
|
|
<section className="pt-24 pb-20 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
<div className="relative aspect-[4/5] bg-background-ice overflow-hidden">
|
|
<img
|
|
src={image}
|
|
alt={product.name}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<h1 className="text-4xl font-serif mb-4">{product.name}</h1>
|
|
|
|
<div className="text-2xl mb-6">{price} RSD</div>
|
|
|
|
<div className="prose max-w-none mb-8" dangerouslySetInnerHTML={{ __html: product.description || '' }} />
|
|
|
|
<button
|
|
className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium text-center hover:bg-opacity-90 transition-all"
|
|
>
|
|
Add to Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|