blob: 2cdfa70f7186f1f6b708b409e783994aa20d400f (
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
|
<script lang="ts">
import Star from '$lib/icons/Star.svelte';
import { createEventDispatcher } from 'svelte';
export let title: string;
export let subtitle: string | null = '';
export let favourite: boolean | undefined = undefined;
const dispatch = createEventDispatcher<{ favourite: null }>();
</script>
<div class="flex flex-wrap gap-x-4">
<div class="flex overflow-hidden">
{#if favourite !== undefined}
<button
type="button"
class="focus-background mr-1 flex items-center"
title="Toggle favourite"
on:click={() => dispatch('favourite')}
>
<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>
|
