40 lines
992 B
TypeScript
40 lines
992 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import ProjectCardSkeleton from './project-card-skeleton';
|
||
|
|
import ProjectListItemSkeleton from './project-list-item-skeleton';
|
||
|
|
|
||
|
|
interface ProjectGridSkeletonProps {
|
||
|
|
viewMode?: 'grid' | 'list';
|
||
|
|
count?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Componente skeleton para ProjectGrid
|
||
|
|
* Muestra múltiples skeletons de tarjetas mientras cargan los datos
|
||
|
|
* Soporta vista grid y lista
|
||
|
|
*/
|
||
|
|
export default function ProjectGridSkeleton({
|
||
|
|
viewMode = 'grid',
|
||
|
|
count = 6
|
||
|
|
}: ProjectGridSkeletonProps) {
|
||
|
|
// Vista de lista
|
||
|
|
if (viewMode === 'list') {
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-3">
|
||
|
|
{Array.from({ length: count }).map((_, index) => (
|
||
|
|
<ProjectListItemSkeleton key={index} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Vista de grid (por defecto)
|
||
|
|
return (
|
||
|
|
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||
|
|
{Array.from({ length: count }).map((_, index) => (
|
||
|
|
<ProjectCardSkeleton key={index} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|