summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/components/Cardlet.svelte
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--frontend/src/lib/components/Cardlet.svelte37
1 files changed, 37 insertions, 0 deletions
diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte
new file mode 100644
index 0000000..04d8599
--- /dev/null
+++ b/frontend/src/lib/components/Cardlet.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+ import type { ComicFilter } from '$gql/graphql';
+ import { href } from '$lib/Navigation';
+
+ export let name: string;
+ export let title: string | null | undefined = undefined;
+
+ export let filter: keyof ComicFilter | undefined = undefined;
+ export let id: number | string | undefined = undefined;
+
+ const handleAux = (e: MouseEvent) => {
+ if (filter === undefined || id === undefined || e.button !== 1) return;
+ window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } }));
+ };
+</script>
+
+<button
+ type="button"
+ class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20"
+ {title}
+ on:click
+ on:auxclick={handleAux}
+>
+ <slot name="overlay" />
+ <article class="group h-full grow items-center gap-2 p-2 text-xs">
+ <h2 class="ellipsis-nowrap text-sm font-medium">{name}</h2>
+ </article>
+</button>
+
+<style>
+ article {
+ display: grid;
+
+ grid-template-columns: 1fr auto;
+ grid-template-rows: 2em;
+ }
+</style>