alexei.dolgolyov
a3aa5912d9
Design system with CSS custom properties (light/dark themes). 38 Lucide SVG icon components. Dark mode with system preference. EN/RU localization with i18n store. Skeleton loaders, empty states, toggle switches, micro-interactions. Responsive sidebar with mobile hamburger menu. All pages polished with consistent styling.
31 lines
895 B
Svelte
31 lines
895 B
Svelte
<!--
|
|
Task 8: Skeleton table placeholder for list views during loading.
|
|
-->
|
|
<script lang="ts">
|
|
import Skeleton from './Skeleton.svelte';
|
|
|
|
interface Props {
|
|
rows?: number;
|
|
cols?: number;
|
|
}
|
|
|
|
const { rows = 5, cols = 4 }: Props = $props();
|
|
</script>
|
|
|
|
<div class="overflow-hidden rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] shadow-[var(--shadow-sm)]">
|
|
<div class="border-b border-[var(--border-primary)] bg-[var(--surface-card-hover)] px-6 py-3">
|
|
<div class="flex gap-6">
|
|
{#each Array(cols) as _, i}
|
|
<Skeleton width={i === 0 ? '6rem' : '5rem'} height="0.75rem" />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{#each Array(rows) as _, i}
|
|
<div class="flex gap-6 border-b border-[var(--border-secondary)] px-6 py-4 last:border-b-0">
|
|
{#each Array(cols) as _, j}
|
|
<Skeleton width={j === 0 ? '40%' : '20%'} height="0.875rem" />
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|