103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { Pencil, Plus } from "lucide-react";
|
|
|
|
// Define types
|
|
interface CardData {
|
|
id: number;
|
|
title: string;
|
|
description: string;
|
|
status: string;
|
|
lastUpdated: string;
|
|
}
|
|
|
|
interface CardProps {
|
|
data: CardData;
|
|
onUpdate: (id: number) => void;
|
|
}
|
|
|
|
// Mock data
|
|
const mockData: CardData[] = [
|
|
{
|
|
id: 1,
|
|
title: "Project Alpha",
|
|
description: "A cutting-edge project for automation",
|
|
status: "In Progress",
|
|
lastUpdated: "2024-03-15",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Project Beta",
|
|
description: "Machine learning integration project",
|
|
status: "Completed",
|
|
lastUpdated: "2024-03-10",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Project Gamma",
|
|
description: "Cloud infrastructure optimization",
|
|
status: "Planning",
|
|
lastUpdated: "2024-03-05",
|
|
},
|
|
];
|
|
|
|
// Card component
|
|
const Card: React.FC<CardProps> = ({ data, onUpdate }) => (
|
|
<div className="bg-white rounded-lg shadow-md p-6 mb-4 hover:shadow-lg transition-shadow">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">{data.title}</h3>
|
|
<p className="text-gray-600 mb-2">{data.description}</p>
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-sm text-gray-500">Status: {data.status}</span>
|
|
<span className="text-sm text-gray-500">
|
|
Last Updated: {data.lastUpdated}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => onUpdate(data.id)}
|
|
className="text-blue-500 hover:text-blue-700 p-2"
|
|
aria-label="Update"
|
|
>
|
|
<Pencil />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
function app000002() {
|
|
const handleUpdate = (id: number) => {
|
|
console.log(`Update clicked for item ${id}`);
|
|
// Add your update logic here
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
console.log("Create clicked");
|
|
// Add your create logic here
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-2xl font-bold">Projects Dashboard</h1>
|
|
<button
|
|
onClick={handleCreate}
|
|
className="bg-blue-500 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-600 transition-colors"
|
|
>
|
|
<Plus />
|
|
Create New
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
{mockData.map((item) => (
|
|
<Card key={item.id} data={item} onUpdate={handleUpdate} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default app000002;
|