adilallo
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
/**
|
|
* Placeholder grid matching GovernanceTemplateGrid layout (loading state).
|
|
*/
|
|
export function GovernanceTemplateGridSkeleton({ count }: { count: number }) {
|
|
return (
|
|
<div
|
|
className="
|
|
flex flex-col gap-[18px]
|
|
min-[768px]:grid min-[768px]:grid-cols-2 min-[768px]:gap-[18px]
|
|
min-[1024px]:gap-[24px]
|
|
"
|
|
aria-busy
|
|
aria-label="Loading templates"
|
|
>
|
|
{Array.from({ length: count }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
className="
|
|
flex min-h-[120px] animate-pulse flex-col gap-3 rounded-[var(--measures-radius-200,8px)]
|
|
bg-[var(--color-surface-default-secondary,#262626)] p-4
|
|
min-[640px]:min-h-[140px] min-[640px]:rounded-[var(--measures-radius-300,12px)]
|
|
min-[1024px]:min-h-[160px] min-[1024px]:rounded-[var(--radius-measures-radius-small)]
|
|
"
|
|
>
|
|
<div className="h-10 w-10 rounded bg-[var(--color-surface-default-tertiary,#404040)] min-[640px]:h-14 min-[640px]:w-14" />
|
|
<div className="h-4 w-[55%] max-w-[280px] rounded bg-[var(--color-surface-default-tertiary,#404040)]" />
|
|
<div className="h-3 w-full max-w-[400px] rounded bg-[var(--color-surface-default-tertiary,#404040)]" />
|
|
<div className="h-3 w-[72%] max-w-[360px] rounded bg-[var(--color-surface-default-tertiary,#404040)]" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|