70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import React, {useEffect, useState} from "react";
|
|
import Link from "next/link";
|
|
|
|
interface Project {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
slug: string;
|
|
}
|
|
|
|
export default function Projects() {
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const response = await fetch('/api/projects');
|
|
try {
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch projects");
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch projects:", error);
|
|
}
|
|
const projectsData = await response.json();
|
|
setProjects(projectsData);
|
|
setTimeout(() => {
|
|
setIsVisible(true);
|
|
}, 250); // Delay to start the animation after Hero
|
|
} catch (error) {
|
|
console.error("Failed to fetch projects:", error);
|
|
}
|
|
};
|
|
fetchProjects().then(r => r);
|
|
}, []);
|
|
const numberOfProjects = projects.length;
|
|
|
|
return (
|
|
<section id="projects" className={`p-10 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
|
|
<h2 className="text-3xl font-bold text-center text-gray-800">
|
|
Projects
|
|
</h2>
|
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{projects.map((project, index) => (
|
|
<Link key={project.id} href={`/Projects/${project.slug}`} className="cursor-pointer">
|
|
<div className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
|
|
style={{animationDelay: `${index * 0.1}s`}}>
|
|
<h3 className="text-2xl font-bold text-gray-800">
|
|
{project.title}
|
|
</h3>
|
|
<p className="mt-2 text-gray-500">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
<div className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
|
|
style={{animationDelay: `${(numberOfProjects + 1) * 0.1}s`}}>
|
|
<h3 className="text-2xl font-bold text-gray-800">
|
|
More to come
|
|
</h3>
|
|
<p className="mt-2 text-gray-500">
|
|
...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |