96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import { Metadata } from 'next'
|
|
import Link from 'next/link'
|
|
import { getAllPosts } from '@/lib/markdown'
|
|
import { formatDate } from '@/lib/utils'
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Blog',
|
|
description: 'Toate articolele din blog',
|
|
}
|
|
|
|
function PostCard({ post }: { post: any }) {
|
|
return (
|
|
<article className="border-b border-gray-200 dark:border-gray-700 pb-8 mb-8 last:border-0">
|
|
<div className="flex flex-col lg:flex-row gap-6">
|
|
{post.frontmatter.image && (
|
|
<div className="lg:w-1/3">
|
|
<img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 lg:h-full object-cover rounded-lg" />
|
|
</div>
|
|
)}
|
|
<div className={post.frontmatter.image ? 'lg:w-2/3' : 'w-full'}>
|
|
<div className="flex items-center gap-4 text-sm text-gray-500 mb-2">
|
|
<time dateTime={post.frontmatter.date}>{formatDate(post.frontmatter.date)}</time>
|
|
<span>•</span>
|
|
<span>{post.readingTime} min citire</span>
|
|
<span>•</span>
|
|
<span>{post.frontmatter.author}</span>
|
|
</div>
|
|
<h2 className="text-2xl font-bold mb-3">
|
|
<Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
|
|
{post.frontmatter.title}
|
|
</Link>
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
|
|
{post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{post.frontmatter.tags.map((tag: string) => (
|
|
<span key={tag} className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-sm rounded-full">
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
<Link href={`/blog/${post.slug}`} className="inline-flex items-center text-primary-600 hover:text-primary-700 transition">
|
|
Citește articolul complet
|
|
<svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
function BlogFilters({ totalPosts }: { totalPosts: number }) {
|
|
return (
|
|
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-8">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold mb-2">Articole Blog</h1>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
{totalPosts} {totalPosts === 1 ? 'articol' : 'articole'} publicate
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default async function BlogPage() {
|
|
const posts = await getAllPosts()
|
|
|
|
if (posts.length === 0) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<h1 className="text-3xl font-bold mb-4">Blog</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-8">Nu există articole publicate încă.</p>
|
|
<Link href="/" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
|
|
Înapoi la pagina principală
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<BlogFilters totalPosts={posts.length} />
|
|
<div>
|
|
{posts.map((post) => (
|
|
<PostCard key={post.slug} post={post} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|