108 lines
4.1 KiB
TypeScript
108 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowRight, Loader2 } from "lucide-react";
|
||
import { getFeaturedProjects } from "@/app/actions";
|
||
|
||
interface ProjectCardProps {
|
||
hero_image: string;
|
||
category: string;
|
||
title: string;
|
||
year: string;
|
||
subtitle: string;
|
||
slug: string;
|
||
}
|
||
|
||
function ProjectCard({ hero_image, category, title, year, subtitle, slug }: ProjectCardProps) {
|
||
return (
|
||
<Link href={`/works/${slug}`} className="group cursor-pointer block">
|
||
<div className="space-y-5">
|
||
<div className="relative aspect-video overflow-hidden bg-black/5 border border-black/10">
|
||
<Image
|
||
src={hero_image || "https://images.unsplash.com/photo-1550745165-9bc0b252726f"}
|
||
alt={title}
|
||
fill
|
||
className="object-cover transition-all duration-700 group-hover:scale-105 grayscale group-hover:grayscale-0"
|
||
/>
|
||
|
||
{/* Category Badge */}
|
||
<div className="absolute top-4 right-4">
|
||
<span className="bg-white/90 backdrop-blur-sm border border-black/10 px-3 py-1 text-[9px] tracking-[0.15em] uppercase text-black/60">
|
||
{category}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content Below Image */}
|
||
<div>
|
||
<div className="flex justify-between items-start mb-2">
|
||
<h3 className="text-[14px] tracking-[0.05em] uppercase text-black group-hover:text-primary transition-colors leading-tight">
|
||
{title}
|
||
</h3>
|
||
<span className="text-[10px] text-black/30 tracking-[0.1em] uppercase mt-0.5">
|
||
{year}
|
||
</span>
|
||
</div>
|
||
<p className="text-[11px] text-black/40 leading-relaxed line-clamp-1">
|
||
{subtitle}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
export default function SelectedWorks() {
|
||
const [projects, setProjects] = useState<any[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
|
||
useEffect(() => {
|
||
async function fetchFeatured() {
|
||
setLoading(true);
|
||
const data = await getFeaturedProjects();
|
||
|
||
if (data && data.length > 0) {
|
||
setProjects(data);
|
||
}
|
||
setLoading(false);
|
||
}
|
||
fetchFeatured();
|
||
}, []);
|
||
|
||
if (loading) return (
|
||
<div className="py-32 flex justify-center">
|
||
<Loader2 className="w-8 h-8 text-primary animate-spin" />
|
||
</div>
|
||
);
|
||
|
||
if (projects.length === 0) return null;
|
||
|
||
return (
|
||
<section className="py-24 px-6 md:px-12 border-t border-black/10">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Header Section */}
|
||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
|
||
<div>
|
||
<span className="text-[10px] tracking-[0.2em] uppercase text-black/40 block mb-4">Son Projeler</span>
|
||
<h2 className="editorial-headline text-4xl md:text-5xl text-black">
|
||
Çalışma Örnekleri
|
||
</h2>
|
||
</div>
|
||
<Link href="/works" className="button-primary group">
|
||
Tüm Portfolyo
|
||
<ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||
{projects.map((project, index) => (
|
||
<ProjectCard key={index} {...project} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
} |