49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { ProjectCard, type Project } from "./ProjectCard";
|
|
|
|
interface ProjectGridProps {
|
|
projects: Project[];
|
|
}
|
|
|
|
export function ProjectGrid({ projects }: ProjectGridProps) {
|
|
if (projects.length === 0) {
|
|
return (
|
|
<div className="text-center py-20">
|
|
<div className="w-16 h-16 rounded-2xl bg-gray-900 border border-gray-800 flex items-center justify-center mx-auto mb-4">
|
|
<svg className="w-8 h-8 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-white mb-1">No projects yet</h3>
|
|
<p className="text-gray-400 text-sm mb-6">
|
|
Create your first MCP server to get started.
|
|
</p>
|
|
<button className="bg-indigo-600 hover:bg-indigo-500 text-white px-5 py-2.5 rounded-lg font-semibold text-sm transition-colors">
|
|
Create Project
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{projects.map((project) => (
|
|
<ProjectCard key={project.id} project={project} />
|
|
))}
|
|
|
|
{/* New Project Card */}
|
|
<button className="border-2 border-dashed border-gray-800 hover:border-gray-600 rounded-xl p-5 flex flex-col items-center justify-center gap-2 transition-colors group min-h-[120px]">
|
|
<div className="w-10 h-10 rounded-full bg-gray-900 group-hover:bg-gray-800 flex items-center justify-center transition-colors">
|
|
<svg className="w-5 h-5 text-gray-500 group-hover:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-500 group-hover:text-gray-400 transition-colors">
|
|
Create New
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|