106 lines
4.4 KiB
TypeScript
106 lines
4.4 KiB
TypeScript
import Link from 'next/link';
|
|
import { getAllPosts } from '@/lib/blog';
|
|
import { getTranslations } from 'next-intl/server';
|
|
|
|
interface BlogIndexProps {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
}
|
|
|
|
export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
|
|
const t = await getTranslations({ locale, namespace: 'blog' });
|
|
|
|
return {
|
|
title: locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions',
|
|
description: locale === 'de'
|
|
? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
|
|
: 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.',
|
|
};
|
|
}
|
|
|
|
export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
|
|
const posts = await getAllPosts(locale);
|
|
const t = await getTranslations({ locale, namespace: 'blog' });
|
|
|
|
// Get unique categories
|
|
const categories = Array.from(new Set(posts.map(post => post.frontmatter.category).filter(Boolean)));
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-12">
|
|
<div className="text-center mb-12">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-primary mb-4">
|
|
{locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions'}
|
|
</h1>
|
|
<p className="text-lg text-text-secondary max-w-3xl mx-auto">
|
|
{locale === 'de'
|
|
? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
|
|
: 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Category filter - could be made interactive with client component */}
|
|
{categories.length > 0 && (
|
|
<div className="mb-8 flex flex-wrap gap-2 justify-center">
|
|
{categories.map((category) => (
|
|
<span
|
|
key={category}
|
|
className="px-4 py-2 bg-neutral-light text-text-primary rounded-full text-sm font-medium"
|
|
>
|
|
{category}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Masonry-style grid */}
|
|
<div className="columns-1 md:columns-2 gap-8 space-y-8">
|
|
{posts.map((post) => (
|
|
<Link
|
|
key={post.slug}
|
|
href={`/${locale}/blog/${post.slug}`}
|
|
className="group block break-inside-avoid mb-8"
|
|
>
|
|
<article className="bg-white rounded-lg shadow-sm overflow-hidden border border-neutral-dark transition-all hover:shadow-md hover:-translate-y-1">
|
|
{post.frontmatter.featuredImage && (
|
|
<div className="relative overflow-hidden">
|
|
<img
|
|
src={post.frontmatter.featuredImage}
|
|
alt={post.frontmatter.title}
|
|
className="w-full h-auto object-cover transition-transform group-hover:scale-105"
|
|
/>
|
|
{post.frontmatter.category && (
|
|
<span className="absolute top-4 left-4 px-3 py-1 bg-primary text-white text-xs font-medium rounded-full">
|
|
{post.frontmatter.category}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="p-6">
|
|
<div className="text-sm text-text-secondary mb-2">
|
|
{new Date(post.frontmatter.date).toLocaleDateString(locale, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</div>
|
|
<h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors line-clamp-2">
|
|
{post.frontmatter.title}
|
|
</h2>
|
|
{post.frontmatter.excerpt && (
|
|
<p className="text-text-secondary line-clamp-3 mb-4">
|
|
{post.frontmatter.excerpt}
|
|
</p>
|
|
)}
|
|
<span className="text-primary font-medium group-hover:underline inline-flex items-center">
|
|
{locale === 'de' ? 'Weiterlesen' : 'Read more'} →
|
|
</span>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|