flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/shapecraft.
flo-bit.dev/shapecraft/
1.5 kB
45 lines
1<script lang="ts">
2 import { Sparkles, Dices, Download } from '@lucide/svelte';
3 import { CATEGORIES, type GeneratorEntry } from '$lib/registry';
4
5 let {
6 entry,
7 ondice,
8 onexport
9 }: { entry: GeneratorEntry; ondice: () => void; onexport: () => void } = $props();
10
11 const category = $derived(CATEGORIES.find((c) => c.id === entry.category)!);
12</script>
13
14<header class="flex h-13 shrink-0 items-center gap-3.5 border-b border-line bg-panel px-4">
15 <div class="flex items-center gap-2 font-bold tracking-tight">
16 <span
17 class="grid size-6 place-items-center rounded-[7px] bg-gradient-to-br from-accent to-[#6db83e] text-accent-ink"
18 >
19 <Sparkles size={15} strokeWidth={2} />
20 </span>
21 shapecraft
22 </div>
23 <div class="h-5.5 w-px bg-line2"></div>
24 <div class="flex items-center gap-2 text-[13px] text-muted">
25 <b class="font-semibold text-ink">{category.label}</b>
26 <span class="text-faint">/</span>
27 <b class="font-semibold text-accent">{entry.label}</b>
28 </div>
29 <div class="flex-1"></div>
30 <button
31 type="button"
32 class="grid size-8.5 place-items-center rounded-[9px] border border-line2 bg-panel2 text-muted hover:border-[#3c424d] hover:text-ink"
33 title="Randomize seed"
34 onclick={ondice}
35 >
36 <Dices size={18} />
37 </button>
38 <button
39 type="button"
40 class="flex h-8.5 items-center gap-1.5 rounded-[9px] bg-accent px-3.5 text-[13px] font-semibold text-accent-ink hover:bg-[#b6f37e]"
41 onclick={onexport}
42 >
43 <Download size={16} />Export GLB
44 </button>
45</header>