Initial commit0.1.0

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>