Add main campaigns component

histoire.config.js

@@ -2,5 +2,5 @@ import { defineConfig } from 'histoire';
 import { HstSvelte } from '@histoire/plugin-svelte';
 
 export default defineConfig({
-	plugins: [HstSvelte()]
+	plugins: [HstSvelte()],
 });

src/lib/components/Campaigns.story.svelte

@@ -0,0 +1,13 @@
+<Beer />
+
+<Hst.Story>
+	<Campaigns {campaigns} />
+</Hst.Story>
+
+<script>
+	export let Hst;
+	import Beer from './Beer.svelte';
+	import Campaigns from './Campaigns.svelte';
+
+	const campaigns = [{ name: 'Earth 613' }];
+</script>

src/lib/components/Campaigns.svelte

@@ -0,0 +1,40 @@
+<article>
+	<header>
+		<h5>Campaigns</h5>
+		<button on:click={newCampaign}>new campaign</button>
+	</header>
+
+	{#each campaigns as campaign (campaign.name)}
+		<div class="row">
+			<i class="light-green-text">south_america</i>
+			<div class="max">
+				<h6>{campaign.name}</h6>
+				<p>chapter 2, second battle.</p>
+			</div>
+			<button on:click={deleteCampaign(campaign)} class="none"
+				>Delete</button
+			>
+		</div>
+	{/each}
+</article>
+
+<script>
+	export let campaigns = [];
+
+	async function deleteCampaign({ name, id }) {
+		if (!window.confirm(`delete campaign ${name}?`)) return;
+	}
+
+	const newCampaign = () => {
+		console.log('TODO');
+	};
+</script>
+
+<style>
+	header {
+		display: flex;
+	}
+	h5 {
+		flex: 1;
+	}
+</style>