68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { ChevronDown } from "lucide-react";
|
|
|
|
export function ModelInfoSkeleton({ isDark }: { isDark: boolean }) {
|
|
return (
|
|
<div
|
|
className={`rounded-xl border ${isDark ? "bg-gray-800 border-none" : "bg-card"} p-6`}
|
|
>
|
|
<div className="mb-4 flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center pr-3 h-9 w-64 rounded-md border border-border">
|
|
<ChevronDown className="ml-auto h-4 w-4 text-gray-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`h-4.5 w-13.5 rounded-full bg-gray-200 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-6 min-h-10 space-y-2">
|
|
<div
|
|
className={`h-4 w-3/4 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
<div
|
|
className={`h-4 w-1/2 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 mb-2">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center gap-3 rounded-lg border border-border/40 bg-secondary/50 p-3"
|
|
>
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted/60">
|
|
<div
|
|
className={`h-7 w-7 rounded bg-gray-200 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-2">
|
|
<div
|
|
className={`h-3 w-20 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
<div
|
|
className={`h-4 w-15 rounded bg-gray-200 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 space-y-3 border-t pt-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex items-center justify-between">
|
|
<div
|
|
className={`h-4 w-32 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
<div
|
|
className={`h-4 w-44 rounded bg-gray-100 ${isDark ? "bg-gray-600" : ""}`}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|