102 lines
4.4 KiB
TypeScript
102 lines
4.4 KiB
TypeScript
import { getAllProducts } from '@/lib/mdx';
|
|
import { mapFileSlugToTranslated } from '@/lib/slugs';
|
|
import { getTranslations } from 'next-intl/server';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
interface RelatedProductsProps {
|
|
currentSlug: string;
|
|
categories: string[];
|
|
locale: string;
|
|
}
|
|
|
|
export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
|
|
const allProducts = await getAllProducts(locale);
|
|
const t = await getTranslations('Products');
|
|
|
|
// Filter products: same category, not current product
|
|
const related = allProducts
|
|
.filter(p =>
|
|
p.slug !== currentSlug &&
|
|
p.frontmatter.categories.some(cat => categories.includes(cat))
|
|
)
|
|
.slice(0, 3); // Limit to 3 for better spacing
|
|
|
|
if (related.length === 0) return null;
|
|
|
|
return (
|
|
<div className="">
|
|
<div className="flex items-end justify-between mb-12">
|
|
<div>
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-primary tracking-tight mb-4">
|
|
{t('relatedProductsTitle') || 'Related Products'}
|
|
</h2>
|
|
<div className="h-1.5 w-20 bg-accent rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{related.map(async (product) => {
|
|
// Find the category slug for the link
|
|
const categorySlugs = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
|
|
const catSlug = categorySlugs.find(slug => {
|
|
const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
|
const title = t(`categories.${key}.title`);
|
|
return product.frontmatter.categories.some(cat =>
|
|
cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title
|
|
);
|
|
}) || 'low-voltage-cables';
|
|
|
|
const translatedProductSlug = await mapFileSlugToTranslated(product.slug, locale);
|
|
|
|
return (
|
|
<Link
|
|
key={product.slug}
|
|
href={`/${locale}/products/${catSlug}/${translatedProductSlug}`}
|
|
className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
|
|
>
|
|
<div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">
|
|
{product.frontmatter.images?.[0] ? (
|
|
<>
|
|
<Image
|
|
src={product.frontmatter.images[0]}
|
|
alt={product.frontmatter.title}
|
|
fill
|
|
className="object-contain p-4 transition-transform duration-700 group-hover:scale-110 z-10"
|
|
/>
|
|
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-2/3 h-3 bg-black/5 blur-lg rounded-full" />
|
|
</>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-text-secondary/30 font-bold uppercase tracking-widest text-xs">
|
|
No Image
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="p-8">
|
|
<div className="flex flex-wrap gap-2 mb-3">
|
|
{product.frontmatter.categories.slice(0, 1).map((cat, idx) => (
|
|
<span key={idx} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
|
|
{cat}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors leading-tight">
|
|
{product.frontmatter.title}
|
|
</h3>
|
|
<div className="mt-6 flex items-center text-primary text-sm font-bold group-hover:text-accent-dark transition-colors">
|
|
<span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-0.5">
|
|
{t('details')}
|
|
</span>
|
|
<svg className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|