Leon-in
95eb362bfc
QuantumLab template converted to Next.js 16 + React 19 + TypeScript: - 8 page routes (home, about, blog, contact, careers, team-members, coming-soon, 404) - Dynamic routes for blog posts, career positions, and team members - GSAP animations (marquee, counters, button hovers) - IntersectionObserver-based scroll reveal (blur-to-clear transitions) - Dark mode with next-themes - React Hook Form + Zod contact form - Framer Motion page transitions - Lottie animations via lottie-web Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { BLOG_POSTS, BLOG_CATEGORIES } from "@/lib/blog-data"
|
|
import BlogCard from "@/components/BlogCard"
|
|
|
|
export default function PostsGridSection() {
|
|
const [activeCategory, setActiveCategory] = useState("All")
|
|
|
|
const filtered = activeCategory === "All"
|
|
? BLOG_POSTS
|
|
: BLOG_POSTS.filter((p) => p.category === activeCategory)
|
|
|
|
return (
|
|
<section className="section">
|
|
<div className="w-layout-blockcontainer container-default w-container">
|
|
<div data-w-id="41a231e8-d013-bd0a-0639-c179719a51f6" style={{ opacity: "0", filter: "blur(8px)" }} className="title-left-content-right align-center">
|
|
<h2>All articles</h2>
|
|
<div className="category-list-wrapper">
|
|
<div role="list" className="category-list">
|
|
{BLOG_CATEGORIES.map((cat) => (
|
|
<button
|
|
key={cat}
|
|
className={`category-link${activeCategory === cat ? " w--current" : ""}`}
|
|
onClick={() => setActiveCategory(cat)}
|
|
type="button"
|
|
>
|
|
{cat}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mg-top-regular">
|
|
<div data-w-id="e99a5296-8389-ce52-d99c-66f9d94e1815" style={{ opacity: "0", filter: "blur(8px)" }} className="w-dyn-list">
|
|
<div role="list" className="blog-v1-grid w-dyn-items">
|
|
{filtered.map((post) => (
|
|
<BlogCard key={post.slug} post={post} variant="grid" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|