mirror of
https://github.com/harivansh-afk/system-design.git
synced 2026-04-15 09:01:17 +00:00
54 lines
2.1 KiB
Svelte
54 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import * as Icons from 'lucide-svelte';
|
|
import { navigationItems, type NavItem } from '$lib/stores/navigation';
|
|
|
|
type IconComponent = typeof Icons.Box;
|
|
function getIcon(iconName: string): IconComponent {
|
|
const iconMap = Icons as unknown as Record<string, IconComponent>;
|
|
return iconMap[iconName] || Icons.Box;
|
|
}
|
|
|
|
const section = navigationItems.find((i) => i.id === 'storage') as NavItem | undefined;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Storage - System Design Explorer</title>
|
|
</svelte:head>
|
|
|
|
<div class="max-w-6xl mx-auto space-y-8">
|
|
<div>
|
|
<div class="flex items-center gap-2 text-surface-500 text-sm mb-2">
|
|
<a href="/" class="hover:text-surface-300">Overview</a>
|
|
<Icons.ChevronRight class="w-4 h-4" />
|
|
<span class="text-surface-300">Storage</span>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-surface-100">Storage</h1>
|
|
<p class="text-surface-400 mt-2">
|
|
Pick the right storage interface: object, block, or file—each fits a different access pattern.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{#each section?.children ?? [] as child}
|
|
{@const Icon = getIcon(child.icon)}
|
|
<a href={child.href} class="card-hover group">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-surface-800 border border-surface-700 flex items-center justify-center flex-shrink-0 group-hover:border-surface-600 transition-colors duration-200">
|
|
<Icon class="w-6 h-6 text-surface-200" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-surface-100 group-hover:text-white transition-colors">
|
|
{child.label}
|
|
</h3>
|
|
<p class="text-sm text-surface-400 mt-1">Concepts + trade-offs</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex items-center text-sm text-surface-400 group-hover:text-surface-200">
|
|
<span>Open</span>
|
|
<Icons.ArrowRight class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|