107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import { useMemo } from "react";
|
|
import { useParams, Link } from "react-router-dom";
|
|
import Layout from "@/components/Layout";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { User, Calendar } from "lucide-react";
|
|
import NotFound from "./NotFound";
|
|
|
|
export default function BlogPost() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
|
|
const featuredPost = {
|
|
title: "The Future of Quantum Game Development",
|
|
excerpt:
|
|
"Exploring how quantum computing will revolutionize game AI, physics simulations, and procedural generation in the next decade.",
|
|
author: "Dr. Sarah Chen",
|
|
date: "December 15, 2024",
|
|
readTime: "8 min read",
|
|
category: "Research",
|
|
likes: 124,
|
|
comments: 23,
|
|
image:
|
|
"https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=1200&h=600&fit=crop",
|
|
};
|
|
|
|
const posts = [
|
|
featuredPost,
|
|
{
|
|
title: "Building Scalable Game Architecture with Microservices",
|
|
excerpt:
|
|
"Learn how to design game backends that can handle millions of concurrent players using modern microservices patterns.",
|
|
author: "Marcus Rodriguez",
|
|
date: "December 12, 2024",
|
|
readTime: "6 min read",
|
|
category: "Technology",
|
|
},
|
|
{
|
|
title: "Advanced Unity Optimization Techniques",
|
|
excerpt:
|
|
"Performance optimization strategies that can boost your Unity game's frame rate by up to 300%.",
|
|
author: "Alex Thompson",
|
|
date: "December 10, 2024",
|
|
readTime: "12 min read",
|
|
category: "Tutorials",
|
|
},
|
|
];
|
|
|
|
const normalize = (t?: string) =>
|
|
(t || "")
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/[^a-z0-9\s-]/g, "")
|
|
.replace(/\s+/g, "-")
|
|
.replace(/-+/g, "-");
|
|
|
|
const post = useMemo(() => {
|
|
if (!slug) return null;
|
|
return posts.find((p) => normalize(p.title) === normalize(slug));
|
|
}, [slug]);
|
|
|
|
if (!post) {
|
|
return <NotFound />;
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-aethex-gradient py-12">
|
|
<div className="container mx-auto px-4 max-w-3xl">
|
|
<Card className="overflow-hidden border-border/50 animate-scale-in">
|
|
<img src={post.image} alt={post.title} className="w-full h-64 object-cover" />
|
|
<CardHeader>
|
|
<Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">{post.category}</Badge>
|
|
<CardTitle className="text-3xl mt-2">{post.title}</CardTitle>
|
|
<CardDescription className="text-muted-foreground mt-2">{post.excerpt}</CardDescription>
|
|
<div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-2">
|
|
<User className="h-4 w-4" /> <span>{post.author}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="h-4 w-4" /> <span>{post.date}</span>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="prose max-w-none mt-6">
|
|
{/* Simple placeholder content for the article body */}
|
|
<p>
|
|
{post.excerpt}
|
|
</p>
|
|
|
|
<p>
|
|
This is a sample article page. In production the blog content would be loaded from the CMS or database and rendered here.
|
|
</p>
|
|
|
|
<p>
|
|
<strong>Author:</strong> {post.author}
|
|
</p>
|
|
|
|
<div className="pt-6">
|
|
<Link to="/blog" className="text-aethex-400 underline">Back to Blog</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|