|
|
@@ -0,0 +1,19 @@
|
|
|
+<script lang="ts">
|
|
|
+ let { tags, activeTags }: { tags: string[]; activeTags?: Set<string> } = $props();
|
|
|
+</script>
|
|
|
+
|
|
|
+<div class="flex flex-wrap gap-1">
|
|
|
+ {#each tags as tag (tag)}
|
|
|
+ {@const active = activeTags?.has(tag)}
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ 'h-min rounded-sm border px-2 text-xs transition-colors',
|
|
|
+ active
|
|
|
+ ? 'border-primary/50 bg-primary/25 text-white/75'
|
|
|
+ : 'border-transparent bg-white/10 text-white/50',
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {tag}
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+</div>
|