basic navbar

src/lib/components/Navbar.stories.svelte

@@ -0,0 +1,12 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Navbar from './Navbar.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navbar',
+		component: Navbar,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default" args={{ title: 'Storybook' }} />

src/lib/components/Navbar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	let { title }: { title: string } = $props();
+</script>
+
+<header>
+	<div class="navbar">
+		<div>
+			<h2>Hestia</h2>
+		</div>
+		<div>
+			<h1>{title}</h1>
+		</div>
+		<div>
+			<p>Welcome!</p>
+		</div>
+	</div>
+</header>
+
+<style>
+	.navbar {
+		@apply flex items-center justify-between border-b-slate-200 bg-slate-100 px-6 py-2 drop-shadow;
+	}
+
+	.navbar h1 {
+		@apply text-2xl;
+	}
+
+	.navbar h2 {
+		@apply text-xl;
+	}
+</style>

src/lib/components/index.ts

@@ -0,0 +1 @@
+export * from './Navbar.svelte';

src/lib/index.ts

@@ -1 +1,2 @@
 // place files you want to import through the `$lib` alias in this folder.
+export * from './components';