85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import { MDXRemote } from 'next-mdx-remote/rsc';
|
|
import { getProductBySlug } from '@/lib/mdx';
|
|
import ProductTechnicalData from '@/components/ProductTechnicalData';
|
|
import Image from 'next/image';
|
|
|
|
interface ProductPageProps {
|
|
params: {
|
|
locale: string;
|
|
slug: string[];
|
|
};
|
|
}
|
|
|
|
const components = {
|
|
ProductTechnicalData,
|
|
p: (props: any) => <div {...props} className="mb-4" />,
|
|
};
|
|
|
|
export default async function ProductPage({ params }: ProductPageProps) {
|
|
const { locale, slug } = params;
|
|
const productSlug = slug[slug.length - 1]; // Use the last segment as the slug
|
|
|
|
const product = await getProductBySlug(productSlug, locale);
|
|
|
|
if (!product) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-4xl font-bold text-primary mb-4">{product.frontmatter.title}</h1>
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{product.frontmatter.categories.map((cat, idx) => (
|
|
<span key={idx} className="bg-neutral-dark text-text-secondary px-2 py-1 rounded text-sm">
|
|
{cat}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div className="lg:col-span-2">
|
|
<div className="prose max-w-none mb-8">
|
|
<MDXRemote source={product.content} components={components} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-1">
|
|
{product.frontmatter.images && product.frontmatter.images.length > 0 && (
|
|
<div className="sticky top-4">
|
|
<div className="bg-white p-4 rounded-lg shadow-sm border border-neutral-dark">
|
|
<div className="relative aspect-square mb-4">
|
|
{/* Note: Images from WC might be external URLs. Next/Image requires configuration for external domains. */}
|
|
{/* For now using standard img tag if domain not configured, or configure domains. */}
|
|
<img
|
|
src={product.frontmatter.images[0]}
|
|
alt={product.frontmatter.title}
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{product.frontmatter.images.slice(1, 5).map((img, idx) => (
|
|
<div key={idx} className="relative aspect-square border border-neutral-dark rounded overflow-hidden">
|
|
<img src={img} alt="" className="w-full h-full object-cover" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 bg-primary-light p-6 rounded-lg">
|
|
<h3 className="text-lg font-semibold text-primary-dark mb-2">Contact Us</h3>
|
|
<p className="text-text-secondary mb-4">Need more information about {product.frontmatter.title}?</p>
|
|
<button className="w-full bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark transition-colors">
|
|
Request Quote
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|