diff options
Diffstat (limited to 'frontend/src/lib/components/Card.svelte')
| -rw-r--r-- | frontend/src/lib/components/Card.svelte | 35 |
1 files changed, 26 insertions, 9 deletions
diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte index d209517..21181dc 100644 --- a/frontend/src/lib/components/Card.svelte +++ b/frontend/src/lib/components/Card.svelte @@ -1,4 +1,4 @@ -<script lang="ts" context="module"> +<script lang="ts" module> import type { ComicFragment, ImageFragment } from '$gql/graphql'; interface CardDetails { @@ -24,12 +24,29 @@ <script lang="ts"> import { src } from '$lib/Utils'; import Star from '$lib/icons/Star.svelte'; + import type { Snippet } from 'svelte'; - export let href: string; - export let details: CardDetails; - export let compact = false; - export let coverOnly = false; - export let ellipsis = true; + interface Props { + href: string; + details: CardDetails; + compact?: boolean; + coverOnly?: boolean; + ellipsis?: boolean; + overlay?: Snippet; + children?: Snippet; + onclick?: (event: MouseEvent) => void; + } + + let { + href, + details, + compact = false, + coverOnly = false, + ellipsis = true, + overlay, + children, + onclick + }: Props = $props(); </script> <a @@ -37,9 +54,9 @@ class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30" class:compact class:grid-card-cover-only={coverOnly} - on:click + {onclick} > - <slot name="overlay" /> + {@render overlay?.()} {#if details.cover} <img class="h-full w-full object-cover object-[center_top]" @@ -76,7 +93,7 @@ </header> <section class="max-h-full grow overflow-auto border-t border-slate-800/80 pt-2 text-xs"> - <slot /> + {@render children?.()} </section> </article> {/if} |