blob: bb36d8fcad52887ccb6cdc69d3290bcf64bf783e (
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
|
<script lang="ts">
import Star from '$lib/icons/Star.svelte';
import type { MouseEventHandler } from 'svelte/elements';
interface Props {
title: string;
subtitle?: string | null;
favourite?: boolean;
onfavourite?: MouseEventHandler<HTMLButtonElement>;
}
let { title, subtitle, favourite, onfavourite }: Props = $props();
</script>
<div class="flex flex-wrap gap-x-4">
<div class="flex overflow-hidden">
{#if favourite !== undefined}
<button
type="button"
class="mr-1 flex items-center focus-visible:bg-yellow-400/20 focus-visible:outline-hidden"
title="Toggle favourite"
onclick={onfavourite}
>
<Star large hoverable {favourite} />
</button>
{/if}
<h1 class="xl:ellipsis-nowrap text-2xl font-semibold">{title}</h1>
</div>
{#if subtitle}
<h2 class="xl:ellipsis-nowrap self-end text-lg font-light text-gray-400">
{subtitle}
</h2>
{/if}
</div>
|
