82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
interface BlogPost {
|
|
slug: string;
|
|
title: string;
|
|
excerpt: string;
|
|
categories: string[];
|
|
}
|
|
|
|
interface BlogPreviewSectionProps {
|
|
posts?: BlogPost[];
|
|
}
|
|
|
|
export function BlogPreviewSection({ posts }: BlogPreviewSectionProps) {
|
|
return (
|
|
<section className="py-24 px-8 border-t border-zinc-800/50">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="flex justify-between items-end mb-12">
|
|
<div>
|
|
<p className="uppercase tracking-[0.2em] text-primary mb-2 font-semibold text-xs">
|
|
From the network
|
|
</p>
|
|
<h2 className="text-3xl font-black tracking-tight">Latest from the Blog</h2>
|
|
</div>
|
|
<Link
|
|
href="/blog"
|
|
className="hidden md:flex items-center gap-2 text-sm text-primary font-semibold hover:gap-3 transition-all"
|
|
>
|
|
View All <ArrowRight size={16} />
|
|
</Link>
|
|
</div>
|
|
|
|
{!posts || posts.length === 0 ? (
|
|
<p className="text-on-surface-variant text-center py-16 text-sm">
|
|
No posts yet. Check back soon for curated Bitcoin content.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
{posts.map((post) => (
|
|
<Link
|
|
key={post.slug}
|
|
href={`/blog/${post.slug}`}
|
|
className="group flex flex-col bg-zinc-900 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200"
|
|
>
|
|
{post.categories.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{post.categories.map((cat) => (
|
|
<span
|
|
key={cat}
|
|
className="text-primary text-[10px] uppercase tracking-widest font-bold"
|
|
>
|
|
{cat}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
<h3 className="font-bold text-base mb-3 leading-snug group-hover:text-primary transition-colors">
|
|
{post.title}
|
|
</h3>
|
|
<p className="text-on-surface-variant text-sm leading-relaxed mb-5 flex-1 line-clamp-3">
|
|
{post.excerpt}
|
|
</p>
|
|
<span className="text-primary text-xs font-semibold flex items-center gap-1.5 group-hover:gap-2.5 transition-all mt-auto">
|
|
Read More <ArrowRight size={13} />
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<Link
|
|
href="/blog"
|
|
className="md:hidden flex items-center justify-center gap-2 text-primary font-semibold mt-8 text-sm"
|
|
>
|
|
View All <ArrowRight size={16} />
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|