瀏覽代碼

feat: add tags component

Thomas Zhang 3 月之前
父節點
當前提交
521b283985
共有 2 個文件被更改,包括 22 次插入0 次删除
  1. 3 0
      src/lib/components/common/tags/index.ts
  2. 19 0
      src/lib/components/common/tags/tags.svelte

+ 3 - 0
src/lib/components/common/tags/index.ts

@@ -0,0 +1,3 @@
+import Tags from './tags.svelte';
+
+export { Tags };

+ 19 - 0
src/lib/components/common/tags/tags.svelte

@@ -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>