43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { cn } from '@/lib/cn';
|
|
import type { Project } from '@/lib/types';
|
|
|
|
interface ProjectCardProps {
|
|
project: Project;
|
|
onClick: (project: Project) => void;
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
active: 'bg-success/20 text-success',
|
|
paused: 'bg-warning/20 text-warning',
|
|
completed: 'bg-blue-600/20 text-blue-400',
|
|
archived: 'bg-gray-600/20 text-gray-400',
|
|
};
|
|
|
|
export function ProjectCard({ project, onClick }: ProjectCardProps): React.ReactElement {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onClick(project)}
|
|
className="w-full rounded-lg border border-surface-border bg-surface-card p-4 text-left transition-colors hover:border-gray-500"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<h3 className="text-sm font-medium text-text-primary">{project.name}</h3>
|
|
<span
|
|
className={cn(
|
|
'rounded-full px-2 py-0.5 text-xs',
|
|
statusColors[project.status] ?? 'bg-gray-600/20 text-gray-400',
|
|
)}
|
|
>
|
|
{project.status}
|
|
</span>
|
|
</div>
|
|
{project.description && (
|
|
<p className="mt-2 line-clamp-2 text-xs text-text-muted">{project.description}</p>
|
|
)}
|
|
<p className="mt-3 text-xs text-text-muted">
|
|
Created {new Date(project.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</button>
|
|
);
|
|
}
|