From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit

---
 frontend/src/lib/components/Cardlet.svelte | 37 ++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 frontend/src/lib/components/Cardlet.svelte

(limited to 'frontend/src/lib/components/Cardlet.svelte')

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>
-- 
cgit v1.2.3-2-gb3c3