blob: d249cc8871772ec568c6ba8df3303b5c08b3548b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<script lang="ts">
import type { ComicFilter } from '$gql/graphql';
import { href } from '$lib/Navigation';
import type { Snippet } from 'svelte';
interface Props {
name: string;
title?: string | null;
filter?: keyof ComicFilter;
id?: number | string;
overlay?: Snippet;
onclick: (event: MouseEvent) => void;
}
let {
name,
title = undefined,
filter = undefined,
id = undefined,
overlay,
onclick
}: Props = $props();
const onauxclick = (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}
{onclick}
{onauxclick}
>
{@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>
</button>
<style>
article {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: 2em;
}
</style>
|
