summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/components/Titlebar.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/lib/components/Titlebar.svelte')
-rw-r--r--frontend/src/lib/components/Titlebar.svelte32
1 files changed, 32 insertions, 0 deletions
diff --git a/frontend/src/lib/components/Titlebar.svelte b/frontend/src/lib/components/Titlebar.svelte
new file mode 100644
index 0000000..8aab2dd
--- /dev/null
+++ b/frontend/src/lib/components/Titlebar.svelte
@@ -0,0 +1,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="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>