68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import ModCard from "./ModCard";
|
||
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
||
interface Mod {
|
||
id: string;
|
||
slug: string;
|
||
title: string;
|
||
description: string;
|
||
icon_url?: string;
|
||
downloads: number;
|
||
followers: number;
|
||
categories: string[];
|
||
project_type: string;
|
||
}
|
||
|
||
interface ModGridProps {
|
||
mods: Mod[];
|
||
isLoading?: boolean;
|
||
title?: string;
|
||
}
|
||
|
||
const ModGrid = ({ mods, isLoading, title }: ModGridProps) => {
|
||
return (
|
||
<section className="py-8">
|
||
{title && (
|
||
<h2 className="mb-6 text-2xl font-bold">{title}</h2>
|
||
)}
|
||
{isLoading ? (
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
{Array.from({ length: 6 }).map((_, i) => (
|
||
<div key={i} className="flex gap-4 rounded-lg border border-border bg-card p-4">
|
||
<Skeleton className="h-16 w-16 shrink-0 rounded-lg" />
|
||
<div className="flex-1 space-y-2">
|
||
<Skeleton className="h-5 w-3/4" />
|
||
<Skeleton className="h-4 w-full" />
|
||
<Skeleton className="h-3 w-1/2" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : mods.length === 0 ? (
|
||
<div className="py-12 text-center text-muted-foreground">
|
||
لا توجد إضافات حالياً
|
||
</div>
|
||
) : (
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
{mods.map((mod) => (
|
||
<ModCard
|
||
key={mod.id}
|
||
id={mod.id}
|
||
slug={mod.slug}
|
||
title={mod.title}
|
||
description={mod.description}
|
||
iconUrl={mod.icon_url}
|
||
downloads={mod.downloads}
|
||
followers={mod.followers}
|
||
categories={mod.categories || []}
|
||
projectType={mod.project_type}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default ModGrid;
|