Space-Banane
50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useProfile } from "../context/ProfileContext";
|
|
import { ProjectCard } from "../components/ProjectCard";
|
|
|
|
// Homepage teaser: the first 3 projects (ordered by size then name, per the API)
|
|
// plus a button through to the full /projects page.
|
|
export function FeaturedProjects() {
|
|
const { projects, loading } = useProfile();
|
|
const top = projects.slice(0, 3);
|
|
|
|
return (
|
|
<section className="mx-auto w-full max-w-6xl space-y-8 px-4 sm:space-y-10">
|
|
<div className="space-y-3 text-center">
|
|
<h2 className="text-3xl font-semibold text-white sm:text-4xl">Featured Projects</h2>
|
|
<p className="mx-auto max-w-2xl text-sm text-gray-500 sm:text-base">
|
|
A few things I've been building lately.
|
|
</p>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<p className="text-center text-gray-500">Loading projects…</p>
|
|
) : top.length === 0 ? (
|
|
<div className="rounded-2xl border border-white/10 bg-white/5 px-5 py-8 text-center text-gray-400">
|
|
No projects published yet.
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 sm:gap-8">
|
|
{top.map((project) => (
|
|
<ProjectCard key={project.id} project={project} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-center">
|
|
<Link
|
|
href="/projects"
|
|
className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:border-white/30 hover:bg-white/10"
|
|
>
|
|
View all projects
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|