129 lines
4.5 KiB
TypeScript
129 lines
4.5 KiB
TypeScript
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import {
|
||
Card,
|
||
CardHeader,
|
||
CardTitle,
|
||
CardContent,
|
||
CardFooter,
|
||
} from "@/components/ui/card";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ArrowRight } from "lucide-react";
|
||
import { pb, getPbImage, type PBPost } from "@/lib/pb";
|
||
import { Dictionary } from "@/lib/IDict";
|
||
|
||
interface BlogPreviewProps {
|
||
lang: string;
|
||
dict: Dictionary["blog"];
|
||
}
|
||
|
||
// Теперь это асинхронный серверный компонент
|
||
export async function BlogPreview({ lang, dict }: BlogPreviewProps) {
|
||
let posts: PBPost[] = [];
|
||
|
||
try {
|
||
// В Next.js App Router лучше использовать нативный fetch для контроля кэша,
|
||
// либо передавать кастомный fetch в PB SDK. Здесь используем ISR на 3600 секунд (1 час).
|
||
posts = await pb.collection(`posts_${lang}`).getFullList<PBPost>({
|
||
filter: "published = true",
|
||
sort: "-created",
|
||
perPage: 3,
|
||
fetch: (url, config) =>
|
||
fetch(url, { ...config, next: { revalidate: 3600 } }),
|
||
});
|
||
} catch (error) {
|
||
console.error("Ошибка загрузки логов:", error);
|
||
return null; // Тихо фейлимся без падения страницы
|
||
}
|
||
|
||
if (posts.length === 0) return null;
|
||
|
||
return (
|
||
<section id="blog" className="py-24 px-4 container mx-auto max-w-7xl">
|
||
<div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
|
||
<div>
|
||
<Badge
|
||
variant="outline"
|
||
className="mb-4 text-primary border-primary/30"
|
||
>
|
||
{dict.badge}
|
||
</Badge>
|
||
<h2 className="text-4xl font-bold tracking-tighter text-foreground">
|
||
{dict.title}
|
||
</h2>
|
||
</div>
|
||
<Button
|
||
asChild
|
||
variant="ghost"
|
||
className="text-muted-foreground hover:text-primary transition-colors"
|
||
>
|
||
<Link
|
||
href={`/${lang}/blog`}
|
||
className="flex items-center gap-2 font-bold"
|
||
>
|
||
{dict.more} <ArrowRight size={16} />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{posts.map((post) => (
|
||
<Card
|
||
key={post.id}
|
||
className="group overflow-hidden border-border/50 bg-card/30 hover:border-primary/50 transition-all duration-300 flex flex-col h-full"
|
||
>
|
||
{post.image && (
|
||
<div className="relative w-full h-48 overflow-hidden border-b border-border/50 bg-muted">
|
||
// Внутри .map в BlogPreview.tsx:
|
||
<Image
|
||
src={getPbImage(post, post.image)}
|
||
alt={post.title}
|
||
fill
|
||
sizes="(max-width: 768px) 100vw, 33vw"
|
||
priority={false}
|
||
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-background to-transparent opacity-80" />
|
||
</div>
|
||
)}
|
||
<CardHeader className="flex-none">
|
||
<div className="text-xs font-mono text-muted-foreground mb-2">
|
||
{new Date(post.created).toLocaleDateString(
|
||
lang === "ru" ? "ru-RU" : "en-US",
|
||
)}
|
||
</div>
|
||
<CardTitle className="text-xl group-hover:text-primary transition-colors line-clamp-2 h-14 flex items-start">
|
||
{post.title}
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex-1">
|
||
<p className="text-sm text-muted-foreground line-clamp-3 leading-relaxed">
|
||
{post.excerpt}
|
||
</p>
|
||
</CardContent>
|
||
<CardFooter className="pt-0">
|
||
<Button
|
||
asChild
|
||
variant="link"
|
||
className="px-0 text-primary font-bold hover:no-underline group/link"
|
||
>
|
||
<Link
|
||
href={`/${lang}/blog/${post.slug}`}
|
||
className="flex items-center gap-1"
|
||
>
|
||
{dict.readMore}
|
||
<ArrowRight
|
||
size={14}
|
||
className="group-hover/link:translate-x-1 transition-transform"
|
||
/>
|
||
</Link>
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|