59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Componente skeleton para ProjectListItem
|
||
|
|
* Muestra un placeholder en formato de lista
|
||
|
|
*/
|
||
|
|
export default function ProjectListItemSkeleton() {
|
||
|
|
return (
|
||
|
|
<div className="bg-white border border-gray-200 rounded-lg p-4">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
{/* Avatar skeleton */}
|
||
|
|
<Skeleton className="w-12 h-12 rounded-lg flex-shrink-0" />
|
||
|
|
|
||
|
|
{/* Info Principal skeleton */}
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="flex items-start justify-between gap-4">
|
||
|
|
<div className="flex-1">
|
||
|
|
<Skeleton className="h-5 w-48 mb-2" />
|
||
|
|
<Skeleton className="h-4 w-32" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Estado skeleton */}
|
||
|
|
<Skeleton className="h-6 w-20" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Progreso skeleton */}
|
||
|
|
<div className="hidden md:flex items-center gap-2 flex-shrink-0 w-32">
|
||
|
|
<Skeleton className="w-4 h-4 rounded" />
|
||
|
|
<div className="flex-1">
|
||
|
|
<Skeleton className="h-3 w-full mb-1" />
|
||
|
|
<Skeleton className="h-1.5 w-full rounded-full" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Presupuesto skeleton */}
|
||
|
|
<div className="hidden lg:flex items-center gap-2 flex-shrink-0">
|
||
|
|
<Skeleton className="w-4 h-4 rounded" />
|
||
|
|
<div className="text-right">
|
||
|
|
<Skeleton className="h-5 w-20 mb-1" />
|
||
|
|
<Skeleton className="h-3 w-16" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Fechas skeleton */}
|
||
|
|
<div className="hidden xl:flex items-center gap-2 flex-shrink-0">
|
||
|
|
<Skeleton className="w-4 h-4 rounded" />
|
||
|
|
<div className="text-right">
|
||
|
|
<Skeleton className="h-5 w-16 mb-1" />
|
||
|
|
<Skeleton className="h-3 w-12" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|