284 lines
11 KiB
TypeScript
284 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { ArrowRight, ArrowLeft, ChevronRight } from "lucide-react";
|
|
import { api } from "@/lib/api";
|
|
import { formatDate } from "@/lib/utils";
|
|
import { Navbar } from "@/components/public/Navbar";
|
|
import { Footer } from "@/components/public/Footer";
|
|
|
|
interface Post {
|
|
id: string;
|
|
slug: string;
|
|
title: string;
|
|
excerpt?: string;
|
|
content?: string;
|
|
author?: string;
|
|
authorPubkey?: string;
|
|
publishedAt?: string;
|
|
createdAt?: string;
|
|
categories?: { id: string; name: string; slug: string }[];
|
|
featured?: boolean;
|
|
}
|
|
|
|
interface Category {
|
|
id: string;
|
|
name: string;
|
|
slug: string;
|
|
}
|
|
|
|
function PostCardSkeleton() {
|
|
return (
|
|
<div className="bg-surface-container-low rounded-xl overflow-hidden animate-pulse">
|
|
<div className="p-6 space-y-4">
|
|
<div className="flex gap-2">
|
|
<div className="h-5 w-16 bg-surface-container-high rounded-full" />
|
|
<div className="h-5 w-20 bg-surface-container-high rounded-full" />
|
|
</div>
|
|
<div className="h-7 w-3/4 bg-surface-container-high rounded" />
|
|
<div className="space-y-2">
|
|
<div className="h-4 w-full bg-surface-container-high rounded" />
|
|
<div className="h-4 w-2/3 bg-surface-container-high rounded" />
|
|
</div>
|
|
<div className="flex justify-between items-center pt-4">
|
|
<div className="h-4 w-32 bg-surface-container-high rounded" />
|
|
<div className="h-4 w-24 bg-surface-container-high rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FeaturedPostSkeleton() {
|
|
return (
|
|
<div className="bg-surface-container-low rounded-xl overflow-hidden animate-pulse mb-12">
|
|
<div className="p-8 md:p-12 space-y-4">
|
|
<div className="h-5 w-24 bg-surface-container-high rounded-full" />
|
|
<div className="h-10 w-2/3 bg-surface-container-high rounded" />
|
|
<div className="space-y-2 max-w-2xl">
|
|
<div className="h-4 w-full bg-surface-container-high rounded" />
|
|
<div className="h-4 w-full bg-surface-container-high rounded" />
|
|
<div className="h-4 w-1/2 bg-surface-container-high rounded" />
|
|
</div>
|
|
<div className="h-4 w-48 bg-surface-container-high rounded" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function BlogPage() {
|
|
const [posts, setPosts] = useState<Post[]>([]);
|
|
const [categories, setCategories] = useState<Category[]>([]);
|
|
const [activeCategory, setActiveCategory] = useState<string>("all");
|
|
const [page, setPage] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const limit = 9;
|
|
|
|
useEffect(() => {
|
|
api.getCategories().then(setCategories).catch(() => {});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
setError(null);
|
|
api
|
|
.getPosts({
|
|
category: activeCategory === "all" ? undefined : activeCategory,
|
|
page,
|
|
limit,
|
|
})
|
|
.then(({ posts: data, total: t }) => {
|
|
setPosts(data);
|
|
setTotal(t);
|
|
})
|
|
.catch((err) => setError(err.message))
|
|
.finally(() => setLoading(false));
|
|
}, [activeCategory, page]);
|
|
|
|
const totalPages = Math.ceil(total / limit);
|
|
const featured = posts.find((p) => p.featured);
|
|
const regularPosts = featured ? posts.filter((p) => p.id !== featured.id) : posts;
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
|
|
<div className="min-h-screen">
|
|
<header className="pt-24 pb-16 px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<p className="uppercase tracking-[0.2em] text-primary mb-4 font-semibold text-sm">
|
|
From the Nostr Network
|
|
</p>
|
|
<h1 className="text-5xl md:text-7xl font-black tracking-tighter mb-4">
|
|
Blog
|
|
</h1>
|
|
<p className="text-xl text-on-surface-variant max-w-xl leading-relaxed">
|
|
Curated Bitcoin content from the Nostr network
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="max-w-7xl mx-auto px-8 mb-12">
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
onClick={() => { setActiveCategory("all"); setPage(1); }}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
activeCategory === "all"
|
|
? "bg-primary text-on-primary"
|
|
: "bg-surface-container-high text-on-surface hover:bg-surface-bright"
|
|
}`}
|
|
>
|
|
All
|
|
</button>
|
|
{categories.map((cat) => (
|
|
<button
|
|
key={cat.id}
|
|
onClick={() => { setActiveCategory(cat.slug); setPage(1); }}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
activeCategory === cat.slug
|
|
? "bg-primary text-on-primary"
|
|
: "bg-surface-container-high text-on-surface hover:bg-surface-bright"
|
|
}`}
|
|
>
|
|
{cat.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-8 pb-24">
|
|
{error && (
|
|
<div className="bg-error-container/20 text-error rounded-xl p-6 mb-8">
|
|
Failed to load posts: {error}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<>
|
|
<FeaturedPostSkeleton />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<PostCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
</>
|
|
) : posts.length === 0 ? (
|
|
<div className="text-center py-24">
|
|
<p className="text-2xl font-bold text-on-surface-variant mb-2">
|
|
No posts yet
|
|
</p>
|
|
<p className="text-on-surface-variant/60">
|
|
Check back soon for curated Bitcoin content.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{featured && page === 1 && (
|
|
<Link
|
|
href={`/blog/${featured.slug}`}
|
|
className="block bg-surface-container-low rounded-xl overflow-hidden mb-12 group hover:bg-surface-container-high transition-colors"
|
|
>
|
|
<div className="p-8 md:p-12">
|
|
<span className="inline-block px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary bg-primary/10 rounded-full mb-6">
|
|
Featured
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-black tracking-tight mb-4 group-hover:text-primary transition-colors">
|
|
{featured.title}
|
|
</h2>
|
|
{featured.excerpt && (
|
|
<p className="text-on-surface-variant text-lg leading-relaxed max-w-2xl mb-6">
|
|
{featured.excerpt}
|
|
</p>
|
|
)}
|
|
<div className="flex items-center gap-4 text-sm text-on-surface-variant/60">
|
|
{featured.author && <span>{featured.author}</span>}
|
|
{featured.publishedAt && (
|
|
<span>{formatDate(featured.publishedAt)}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
{regularPosts.map((post) => (
|
|
<Link
|
|
key={post.id}
|
|
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 && post.categories.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{post.categories.map((cat) => (
|
|
<span
|
|
key={cat.id}
|
|
className="text-primary text-[10px] uppercase tracking-widest font-bold"
|
|
>
|
|
{cat.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<h3 className="font-bold text-base mb-3 leading-snug group-hover:text-primary transition-colors">
|
|
{post.title}
|
|
</h3>
|
|
|
|
{post.excerpt && (
|
|
<p className="text-on-surface-variant text-sm leading-relaxed mb-5 flex-1 line-clamp-3">
|
|
{post.excerpt}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between mt-auto pt-4 border-t border-zinc-800/60">
|
|
<div className="flex items-center gap-2 text-xs text-on-surface-variant/50">
|
|
{post.author && <span>{post.author}</span>}
|
|
{post.author && (post.publishedAt || post.createdAt) && <span>·</span>}
|
|
{(post.publishedAt || post.createdAt) && (
|
|
<span>
|
|
{formatDate(post.publishedAt || post.createdAt!)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-primary text-xs font-semibold flex items-center gap-1.5 group-hover:gap-2.5 transition-all">
|
|
Read <ArrowRight size={12} />
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-center gap-4 mt-16">
|
|
<button
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
disabled={page === 1}
|
|
className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-surface-container-high text-on-surface font-medium transition-colors hover:bg-surface-bright disabled:opacity-30 disabled:cursor-not-allowed"
|
|
>
|
|
<ArrowLeft size={16} /> Previous
|
|
</button>
|
|
<span className="text-sm text-on-surface-variant">
|
|
Page {page} of {totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
|
|
disabled={page === totalPages}
|
|
className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-surface-container-high text-on-surface font-medium transition-colors hover:bg-surface-bright disabled:opacity-30 disabled:cursor-not-allowed"
|
|
>
|
|
Next <ChevronRight size={16} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|