245 lines
11 KiB
TypeScript
245 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ExternalLink, Calendar, Tag, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useParams } from 'next/navigation';
|
|
import { useState, useEffect } from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import Image from 'next/image';
|
|
|
|
interface Project {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
content: string;
|
|
tags: string[];
|
|
featured: boolean;
|
|
category: string;
|
|
date: string;
|
|
github?: string;
|
|
live?: string;
|
|
imageUrl?: string;
|
|
}
|
|
|
|
const ProjectDetail = () => {
|
|
const params = useParams();
|
|
const slug = params.slug as string;
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
|
|
// Load project from API by slug
|
|
useEffect(() => {
|
|
const loadProject = async () => {
|
|
try {
|
|
const response = await fetch(`/api/projects/search?slug=${slug}`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.projects && data.projects.length > 0) {
|
|
setProject(data.projects[0]);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
if (process.env.NODE_ENV === 'development') {
|
|
console.error('Error loading project:', error);
|
|
}
|
|
}
|
|
};
|
|
|
|
loadProject();
|
|
}, [slug]);
|
|
|
|
if (!project) {
|
|
return (
|
|
<div className="min-h-screen bg-[#fdfcf8] flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-stone-800 mx-auto mb-4"></div>
|
|
<p className="text-stone-500 font-medium">Loading project...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
|
|
<div className="max-w-4xl mx-auto px-4">
|
|
{/* Navigation */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="mb-8"
|
|
>
|
|
<Link
|
|
href="/projects"
|
|
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
|
|
>
|
|
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
|
<span className="font-medium">Back to Projects</span>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
{/* Header & Meta */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.1 }}
|
|
className="mb-12"
|
|
>
|
|
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
|
<h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
|
|
{project.title}
|
|
</h1>
|
|
<div className="flex gap-2 shrink-0 pt-2">
|
|
{project.featured && (
|
|
<span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
|
|
Featured
|
|
</span>
|
|
)}
|
|
<span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
|
|
{project.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xl md:text-2xl text-stone-600 font-light leading-relaxed max-w-3xl mb-8">
|
|
{project.description}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
|
|
<div className="flex items-center space-x-2">
|
|
<Calendar size={18} />
|
|
<span className="font-mono">{new Date(project.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
|
</div>
|
|
<div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{project.tags.map(tag => (
|
|
<span key={tag} className="text-stone-700 font-medium">#{tag}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Featured Image / Fallback */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
|
|
>
|
|
{project.imageUrl ? (
|
|
<>
|
|
<img
|
|
src={project.imageUrl}
|
|
alt={project.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
{/* Texture/Grain Overlay */}
|
|
<div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
|
|
</>
|
|
) : (
|
|
<div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
|
|
{/* Mesh Gradient Fallback */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
|
|
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
|
|
<div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
|
|
|
|
{/* Texture/Grain Overlay */}
|
|
<div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
|
|
|
|
<div className="relative z-10">
|
|
<span className="text-9xl font-serif font-black text-stone-800/10 select-none tracking-tighter">
|
|
{project.title.charAt(0)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
|
|
{/* Content & Sidebar Layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
{/* Main Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="lg:col-span-2"
|
|
>
|
|
<div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
|
|
<ReactMarkdown
|
|
components={{
|
|
// Custom components to ensure styling matches
|
|
h1: ({children}) => <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>,
|
|
h2: ({children}) => <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>,
|
|
p: ({children}) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
|
|
li: ({children}) => <li className="text-stone-700">{children}</li>,
|
|
code: ({children}) => <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">{children}</code>,
|
|
pre: ({children}) => <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">{children}</pre>,
|
|
}}
|
|
>
|
|
{project.content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Sidebar / Actions */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="lg:col-span-1 space-y-8"
|
|
>
|
|
<div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
|
|
<h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
|
|
<Share2 size={18} />
|
|
Project Links
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{project.live && project.live.trim() && project.live !== "#" ? (
|
|
<a
|
|
href={project.live}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
|
|
>
|
|
<span>Live Demo</span>
|
|
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
|
</a>
|
|
) : (
|
|
<div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
|
|
Live demo not available
|
|
</div>
|
|
)}
|
|
|
|
{project.github && project.github.trim() && project.github !== "#" ? (
|
|
<a
|
|
href={project.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
|
|
>
|
|
<span>View Source</span>
|
|
<GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t border-stone-100">
|
|
<h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{project.tags.map(tag => (
|
|
<span key={tag} className="px-2.5 py-1 bg-stone-100 text-stone-600 text-xs font-medium rounded-md border border-stone-200">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProjectDetail; |