From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit

---
 frontend/src/lib/components/Titlebar.svelte | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 frontend/src/lib/components/Titlebar.svelte

(limited to 'frontend/src/lib/components/Titlebar.svelte')

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>
-- 
cgit v1.2.3-2-gb3c3