diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx new file mode 100644 index 000000000..b4c3963fb --- /dev/null +++ b/src/app/[...slug]/page.tsx @@ -0,0 +1,162 @@ +import { notFound } from 'next/navigation'; +import Image from 'next/image'; +import Link from 'next/link'; +import { productCategories } from '@/data/site-config'; + +interface Props { + params: { slug: string[] }; +} + +// Generate all possible paths from product categories +export async function generateStaticParams() { + const paths: { slug: string[] }[] = []; + + productCategories.forEach((product) => { + // Remove leading slash and split the href + const pathParts = product.href.replace(/^\//, '').split('/'); + paths.push({ slug: pathParts }); + }); + + return paths; +} + +function findProductBySlug(slug: string[]) { + const fullPath = '/' + slug.join('/'); + return productCategories.find((p) => p.href === fullPath); +} + +export async function generateMetadata({ params }: Props) { + const product = findProductBySlug(params.slug); + + if (!product) { + return { title: 'ไม่พบหน้า' }; + } + + return { + title: `${product.name} - ${product.nameEn}`, + description: product.description, + keywords: product.keywords, + }; +} + +export default function ProductDetailPage({ params }: Props) { + const product = findProductBySlug(params.slug); + + if (!product) { + notFound(); + } + + // Find related products in same category + const relatedProducts = productCategories + .filter((p) => p.slug === product.slug && p.id !== product.id) + .slice(0, 4); + + return ( +
+ {product.description} +
+ + {/* CTA */} +{siteConfig.description}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 0baae01b1..57de12984 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -45,13 +45,14 @@ export default function Header() {