summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/scraper/components/SelectorGroup.svelte
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--frontend/src/lib/scraper/components/SelectorGroup.svelte35
1 files changed, 35 insertions, 0 deletions
diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte
new file mode 100644
index 0000000..ae7287a
--- /dev/null
+++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+ import { Selector } from '$lib/Scraper';
+ import SelectorButton from './SelectorButton.svelte';
+
+ export let title: string;
+ export let selectors: Selector<string>[];
+
+ function invert() {
+ for (let selector of selectors) {
+ selector.keep = !selector.keep;
+ }
+ selectors = selectors;
+ }
+</script>
+
+{#if selectors.length > 0}
+ <div class="group col-span-6 flex flex-col gap-1">
+ <div class="flex gap-2">
+ <h2>{title}</h2>
+ <button
+ type="button"
+ class="flex items-end opacity-0 brightness-75 transition-opacity hover:brightness-110 group-hover:opacity-100"
+ on:click={invert}
+ title="Invert selection"
+ >
+ <span class="icon-xs icon-[material-symbols--compare-arrows]"></span>
+ </button>
+ </div>
+ <div class="flex flex-wrap gap-y-1">
+ {#each selectors as selector}
+ <SelectorButton {selector} />
+ {/each}
+ </div>
+ </div>
+{/if}