107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
import { pb, getPbImage } from "@/lib/pb";
|
|
import { notFound } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { ArrowLeft, Calendar, Clock, ShieldCheck } from "lucide-react";
|
|
import { getDictionary } from "@/lib/dictionaries";
|
|
|
|
interface PBPost {
|
|
id: string;
|
|
collectionId: string;
|
|
title: string;
|
|
slug: string;
|
|
content: string;
|
|
image: string;
|
|
lang: string;
|
|
created: string;
|
|
published: boolean;
|
|
}
|
|
|
|
interface Props {
|
|
params: Promise<{ lang: string; slug: string }>;
|
|
}
|
|
|
|
export default async function BlogPostPage({ params }: Props) {
|
|
const { lang, slug } = await params;
|
|
const dict = await getDictionary(lang);
|
|
|
|
let post: PBPost;
|
|
|
|
try {
|
|
post = await pb
|
|
.collection(`posts_${lang}`)
|
|
.getFirstListItem<PBPost>(`slug = "${slug}" && published = true`, {
|
|
cache: "no-store",
|
|
});
|
|
} catch (error) {
|
|
notFound();
|
|
}
|
|
return (
|
|
<main className="min-h-screen pt-32 pb-20 bg-background">
|
|
<div className="container mx-auto max-w-3xl px-4">
|
|
<Link
|
|
href={`/${lang}/blog`}
|
|
className="inline-flex items-center gap-2 text-sm font-mono text-muted-foreground hover:text-primary mb-12 transition-colors group"
|
|
>
|
|
<ArrowLeft
|
|
size={16}
|
|
className="group-hover:-translate-x-1 transition-transform"
|
|
/>
|
|
<span className="opacity-50">root@netrunner:~#</span>
|
|
<span>{dict.blog.backBtn}</span>
|
|
</Link>
|
|
|
|
<article className="relative">
|
|
{post.image && (
|
|
<div className="w-full h-[300px] md:h-[450px] rounded-3xl overflow-hidden mb-12 border border-border/50 shadow-2xl shadow-primary/10 relative">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={getPbImage(post, post.image)}
|
|
alt={post.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-60" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap items-center gap-6 text-[10px] font-mono text-primary mb-8 uppercase tracking-[0.2em]">
|
|
<span className="flex items-center gap-2 px-3 py-1 bg-primary/10 rounded-full border border-primary/20">
|
|
<Calendar size={12} />
|
|
{new Date(post.created).toLocaleDateString(
|
|
lang === "ru" ? "ru-RU" : "en-US",
|
|
)}
|
|
</span>
|
|
<span className="flex items-center gap-2 text-muted-foreground">
|
|
<Clock size={12} />
|
|
{dict.blog.readTime}
|
|
</span>
|
|
<span className="flex items-center gap-2 text-green-500/70">
|
|
<ShieldCheck size={12} />
|
|
{dict.blog.verified}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-6xl font-extrabold tracking-tighter mb-10 leading-[1.1] text-foreground">
|
|
{post.title}
|
|
</h1>
|
|
|
|
<div
|
|
className="prose prose-invert prose-p:text-muted-foreground/90 prose-p:leading-relaxed prose-headings:text-foreground prose-headings:tracking-tighter prose-a:text-primary prose-strong:text-foreground prose-code:text-primary max-w-none text-lg selection:bg-primary/30"
|
|
dangerouslySetInnerHTML={{ __html: post.content }}
|
|
/>
|
|
|
|
<div className="mt-20 pt-10 border-t border-border/30 flex justify-between items-center">
|
|
<div className="text-[10px] font-mono text-muted-foreground/40 uppercase tracking-widest">
|
|
{dict.blog.endTransmission}
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<div className="w-2 h-2 bg-primary rounded-full animate-ping" />
|
|
<div className="w-2 h-2 bg-primary rounded-full opacity-50" />
|
|
<div className="w-2 h-2 bg-primary rounded-full opacity-20" />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|