73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { ScriptCard, Script } from './ScriptCard';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
interface ScriptGridProps {
|
|
scripts: Script[];
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export function ScriptGrid({ scripts, isLoading }: ScriptGridProps) {
|
|
if (isLoading) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{Array.from({ length: 8 }).map((_, index) => (
|
|
<ScriptCardSkeleton key={index} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (scripts.length === 0) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<div className="text-muted-foreground text-lg">
|
|
No scripts found matching your criteria.
|
|
</div>
|
|
<div className="text-sm text-muted-foreground mt-2">
|
|
Try adjusting your filters or search terms.
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{scripts.map((script) => (
|
|
<ScriptCard key={script.id} script={script} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ScriptCardSkeleton() {
|
|
return (
|
|
<div className="border rounded-lg p-6 space-y-4">
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-6 w-3/4" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-2/3" />
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<Skeleton className="h-6 w-16 rounded-full" />
|
|
<Skeleton className="h-6 w-20 rounded-full" />
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<Skeleton className="h-6 w-24 rounded-full" />
|
|
<Skeleton className="h-6 w-20 rounded-full" />
|
|
</div>
|
|
|
|
<div className="flex justify-between text-sm">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-4 w-16" />
|
|
</div>
|
|
|
|
<div className="flex space-x-2 pt-2">
|
|
<Skeleton className="h-9 flex-1" />
|
|
<Skeleton className="h-9 w-9" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|