add selected tag indicator

reykjalin · Jul 20, 2024 · 1230a5c · 1230a5c
1 parent fd639c0
commit 1230a5c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/resources/js/src/entrypoints/Tasks.svelte b/resources/js/src/entrypoints/Tasks.svelte
@@ -214,9 +214,13 @@
 		<p
 			style={'text-align:center;display:flex;flex-direction:row;gap:0.5rem;justify-content:center;'}
 		>
-			<Pill onClick={() => (selectedTag = undefined)}>All</Pill>
+			<Pill onClick={() => (selectedTag = undefined)} isSelected={selectedTag === undefined}
+				>All</Pill
+			>
 			{#each tags as tag}
-				<Pill onClick={() => (selectedTag = tag)}>{tag.name}</Pill>
+				<Pill onClick={() => (selectedTag = tag)} isSelected={selectedTag === tag}
+					>{tag.name}</Pill
+				>
 			{/each}
 		</p>
 	{:catch error}

diff --git a/resources/js/src/lib/components/pill.svelte b/resources/js/src/lib/components/pill.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	export let onClick: (() => void) | null = null;
+	export let isSelected: boolean = false;
 
 	function handleClick(_ev: MouseEvent) {
 		if (onClick) {
@@ -9,9 +10,11 @@
 </script>
 
 {#if onClick}
-	<button class="pill" on:click={handleClick}><slot></slot></button>
+	<button class={isSelected ? 'pill selected' : 'pill'} on:click={handleClick}
+		><slot></slot></button
+	>
 {:else}
-	<span class="pill"><slot></slot></span>
+	<span class={isSelected ? 'pill selected' : 'pill'}><slot></slot></span>
 {/if}
 
 <style>
@@ -22,6 +25,10 @@
 		background-color: #f0f0f0;
 	}
 
+	.selected {
+		background-color: lightgray;
+	}
+
 	button.pill:hover {
 		background-color: lightgray;
 		cursor: pointer;