52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
// app/components/Projects.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Project {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
link: string;
|
|
}
|
|
|
|
export default function Projects() {
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetch("/data/projects.json")
|
|
.then((res) => res.json())
|
|
.then((data) => setProjects(data));
|
|
}, []);
|
|
|
|
return (
|
|
<section id="projects" className="p-10 bg-gray-100 dark:bg-gray-800">
|
|
<h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
|
|
Projects
|
|
</h2>
|
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{projects.map((project) => (
|
|
<div
|
|
key={project.id}
|
|
className="p-4 border rounded shadow-lg bg-white dark:bg-gray-700"
|
|
>
|
|
<h3 className="text-2xl font-bold text-gray-800 dark:text-white">
|
|
{project.title}
|
|
</h3>
|
|
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
|
{project.description}
|
|
</p>
|
|
<Link
|
|
href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
|
|
className="mt-4 inline-block text-blue-500 hover:underline"
|
|
>
|
|
View Project
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|