66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import type { BlogPost } from "@/lib/blog";
|
|
import BlogCard from "./BlogCard";
|
|
import ScrollReveal from "./ScrollReveal";
|
|
|
|
export default function BlogList({ posts }: { posts: BlogPost[] }) {
|
|
const [filter, setFilter] = useState<"all" | "blog" | "case-study">("all");
|
|
|
|
const filteredPosts = filter === "all" ? posts : posts.filter((p) => p.category === filter);
|
|
|
|
return (
|
|
<div>
|
|
{/* Filter Tabs */}
|
|
<div className="flex justify-center gap-4 mb-12">
|
|
<button
|
|
onClick={() => setFilter("all")}
|
|
className={`px-6 py-3 rounded-full font-medium transition-all ${
|
|
filter === "all"
|
|
? "bg-cyan-600 text-white shadow-lg shadow-cyan-500/30"
|
|
: "bg-gray-800 text-gray-400 hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
Wszystkie ({posts.length})
|
|
</button>
|
|
<button
|
|
onClick={() => setFilter("blog")}
|
|
className={`px-6 py-3 rounded-full font-medium transition-all ${
|
|
filter === "blog"
|
|
? "bg-cyan-600 text-white shadow-lg shadow-cyan-500/30"
|
|
: "bg-gray-800 text-gray-400 hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
Blog ({posts.filter((p) => p.category === "blog").length})
|
|
</button>
|
|
<button
|
|
onClick={() => setFilter("case-study")}
|
|
className={`px-6 py-3 rounded-full font-medium transition-all ${
|
|
filter === "case-study"
|
|
? "bg-cyan-600 text-white shadow-lg shadow-cyan-500/30"
|
|
: "bg-gray-800 text-gray-400 hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
Case Studies ({posts.filter((p) => p.category === "case-study").length})
|
|
</button>
|
|
</div>
|
|
|
|
{/* Posts Grid */}
|
|
{filteredPosts.length === 0 ? (
|
|
<div className="text-center py-20">
|
|
<p className="text-gray-500 text-lg">Brak postów w tej kategorii</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredPosts.map((post, i) => (
|
|
<ScrollReveal key={post.slug} delay={i * 100}>
|
|
<BlogCard post={post} />
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|