1 files changed, 77 insertions, 0 deletions
diff --git a/frontend/src/lib/filter/components/Filter.svelte b/frontend/src/lib/filter/components/Filter.svelte
new file mode 100644
index 0000000..ead5c4d
--- /dev/null
+++ b/frontend/src/lib/filter/components/Filter.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Association, Enum } from '$lib/Filter';
+	import type { ListItem } from '$lib/Utils';
+	import Select from '$lib/components/Select.svelte';
+	import { getContext } from 'svelte';
+
+	export let title: string;
+	const context: 'include' | 'exclude' = getContext('filter-type');
+	$: exclude = context === 'exclude';
+
+	const id = `${context}-${title.toLowerCase()}`;
+
+	export let options: ListItem[] | undefined;
+	export let filter: Association<string> | Enum<string>;
+</script>
+
+<div class:exclude class="filter-container">
+	<div class="flex gap-2">
+		<label for={id}>{title}</label>
+		<div class="ml-auto flex items-center gap-1 self-center text-xs">
+			{#if filter instanceof Association}
+				<button
+					type="button"
+					title="matches all"
+					class:active={filter.mode === 'all'}
+					class="btn btn-xs"
+					on:click={() => (filter.mode = 'all')}
+				>
+					&forall;
+				</button>
+				<button
+					type="button"
+					title="matches any of"
+					class:active={filter.mode === 'any'}
+					class="btn btn-xs"
+					on:click={() => (filter.mode = 'any')}
+				>
+					&exist;
+				</button>
+				<button
+					type="button"
+					title="matches exactly"
+					class:active={filter.mode === 'exact'}
+					class="btn btn-xs"
+					on:click={() => (filter.mode = 'exact')}
+				>
+					&equals;
+				</button>
+				<hr class="border-px border-slate-600" />
+			{/if}
+			<button
+				type="button"
+				title="empty"
+				class:active={filter.empty}
+				class="btn btn-xs"
+				on:click={() => (filter.empty = !filter.empty)}
+			>
+				&empty;
+			</button>
+		</div>
+	</div>
+	<Select multi clearable {options} {id} bind:value={filter.values} />
+</div>
+
+<style lang="postcss">
+	button:hover {
+		@apply bg-slate-700;
+	}
+
+	button.active {
+		@apply bg-indigo-800;
+	}
+
+	.filter-container {
+		grid-column: var(--grid-column);
+	}
+</style>