diff options
Diffstat (limited to 'frontend/src/lib/components/Cardlet.svelte')
| -rw-r--r-- | frontend/src/lib/components/Cardlet.svelte | 28 |
1 files changed, 13 insertions, 15 deletions
diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte index 04d8599..cfbbd58 100644 --- a/frontend/src/lib/components/Cardlet.svelte +++ b/frontend/src/lib/components/Cardlet.svelte @@ -1,27 +1,25 @@ <script lang="ts"> - import type { ComicFilter } from '$gql/graphql'; - import { href } from '$lib/Navigation'; + import type { Snippet } from 'svelte'; - 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; + interface Props { + name: string; + title?: string | null; + overlay?: Snippet; + onclick: (event: MouseEvent) => void; + onauxclick?: (event: MouseEvent) => void; + } - const handleAux = (e: MouseEvent) => { - if (filter === undefined || id === undefined || e.button !== 1) return; - window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } })); - }; + let { name, title = undefined, overlay, onclick, onauxclick = undefined }: Props = $props(); </script> <button type="button" - class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20" + class="relative flex overflow-hidden rounded-sm bg-slate-900 text-left shadow-md shadow-slate-950/20" {title} - on:click - on:auxclick={handleAux} + {onclick} + {onauxclick} > - <slot name="overlay" /> + {@render 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> |