Blog
This commit is contained in:
@@ -0,0 +1,203 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Github,
|
||||
MessageSquare,
|
||||
Sparkles,
|
||||
ExternalLink,
|
||||
Star,
|
||||
GitFork,
|
||||
} from "lucide-react";
|
||||
import WebStuff from "@/components/Web";
|
||||
import projects from "@/lib/posts";
|
||||
import formatNumber from "@/lib/formatNumber";
|
||||
|
||||
export default function Blog() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [activeFilter, setActiveFilter] = useState("all");
|
||||
const [orgStats, setOrgStats] = useState({
|
||||
contributors: 0,
|
||||
stars: 0,
|
||||
forks: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchStats() {
|
||||
const res = await fetch(`/api/stats`);
|
||||
|
||||
setOrgStats(await res.json());
|
||||
}
|
||||
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
const filters = [
|
||||
{ id: "all", label: "All Blogs" },
|
||||
{ id: "news", label: "News" },
|
||||
{ id: "guides", label: "Guides" },
|
||||
{ id: "research", label: "Research" },
|
||||
{ id: "journal", label: "Journal" },
|
||||
];
|
||||
|
||||
const filteredPosts =
|
||||
activeFilter === "all"
|
||||
? projects
|
||||
: projects.filter((p) => p.category === activeFilter);
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<WebStuff>
|
||||
{/* Hero Section */}
|
||||
<motion.section
|
||||
className="relative z-10 px-6 py-16 lg:py-24 max-w-7xl mx-auto"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
<motion.div variants={itemVariants} className="mb-6">
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Latest Posts & Updates
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
variants={itemVariants}
|
||||
className="text-5xl lg:text-6xl font-bold mb-6"
|
||||
>
|
||||
<span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
|
||||
Project Updates
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={itemVariants}
|
||||
className="text-xl text-slate-300 mb-8 leading-relaxed max-w-3xl mx-auto"
|
||||
>
|
||||
Latest updates, articles, and guides from our team.
|
||||
</motion.p>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="flex flex-wrap justify-center gap-3"
|
||||
>
|
||||
{filters.map((filter) => (
|
||||
<button
|
||||
key={filter.id}
|
||||
onClick={() => setActiveFilter(() => filter.id)}
|
||||
className={`px-6 py-2.5 rounded-lg font-medium transition-all ${
|
||||
activeFilter === filter.id
|
||||
? "bg-purple-500 text-white shadow-lg shadow-purple-500/50"
|
||||
: "bg-slate-800/50 text-slate-300 hover:bg-slate-700/50 border border-slate-700"
|
||||
}`}
|
||||
>
|
||||
{filter.label}
|
||||
</button>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Blog Posts List */}
|
||||
<motion.section
|
||||
className="relative z-10 px-6 py-12 max-w-5xl mx-auto"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants}
|
||||
>
|
||||
<div className="flex flex-col gap-8">
|
||||
{filteredPosts.map((post, i) => (
|
||||
<motion.article
|
||||
key={i}
|
||||
layout
|
||||
className="relative group bg-slate-900/80 backdrop-blur border border-slate-700 rounded-2xl p-6 hover:border-purple-500/50 transition-all"
|
||||
whileHover={{ y: -3 }}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
{/* Optional Thumbnail */}
|
||||
{post.image && (
|
||||
<div className="shrink-0 w-full md:w-40 h-32 md:h-28 overflow-hidden rounded-xl">
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-2 group-hover:text-purple-400 transition-colors">
|
||||
{post.title}
|
||||
</h3>
|
||||
<p className="text-slate-300 mb-4 line-clamp-3">
|
||||
{post.description}
|
||||
</p>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="flex flex-wrap items-center gap-3 text-sm text-slate-400 mb-4">
|
||||
<span>{post.author}</span>
|
||||
<span>•</span>
|
||||
<span>{new Date(post.date).toLocaleDateString()}</span>
|
||||
{post.readingTime && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>{post.readingTime} min read</span>
|
||||
</>
|
||||
)}
|
||||
{post.tags?.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 bg-slate-800/50 border border-slate-700 rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Read More */}
|
||||
<a
|
||||
href={post.url}
|
||||
className="self-start mt-auto inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-lg text-sm font-medium text-purple-400 transition-colors"
|
||||
>
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.article>
|
||||
))}
|
||||
</div>
|
||||
</motion.section>
|
||||
</WebStuff>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user