From 4da813f841ebc3d39bfec92142931392ce358806 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Mon, 9 Dec 2024 15:42:33 -0500
Subject: [PATCH] button component

---
 src/lib/components/Button.stories.svelte | 30 ++++++++++++++
 src/lib/components/Button.svelte         | 51 ++++++++++++++++++++++++
 src/lib/components/Navbar.svelte         |  2 +-
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/Button.stories.svelte
 create mode 100644 src/lib/components/Button.svelte

diff --git a/src/lib/components/Button.stories.svelte b/src/lib/components/Button.stories.svelte
new file mode 100644
index 0000000..9403409
--- /dev/null
+++ b/src/lib/components/Button.stories.svelte
@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+	import { fn } from '@storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Button',
+		component: Button,
+		tags: ['autodocs'],
+		args: {
+			onClick: fn()
+		},
+		argTypes: {
+			size: {
+				control: 'select',
+				options: ['small', 'normal', 'large'],
+				defaultValue: 'normal'
+			},
+			backgroundColor: {
+				control: 'color'
+			},
+			primary: {
+				control: 'boolean',
+				defaultValue: true
+			}
+		}
+	});
+</script>
+
+<Story name="Default" args={{ label: 'Button', size: 'normal', primary: true }} />
\ No newline at end of file
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
new file mode 100644
index 0000000..a000be1
--- /dev/null
+++ b/src/lib/components/Button.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let {
+		type = 'button',
+		onClick,
+		label,
+		size = 'normal',
+		backgroundColor,
+		primary = false
+	}: {
+		type: HTMLButtonAttributes['type'];
+		onClick: () => void;
+		label: string;
+		size: 'small' | 'normal' | 'large';
+		backgroundColor: string;
+		primary: boolean;
+	} = $props();
+</script>
+
+<button
+	{type}
+	onclick={onClick}
+	class={`button button--${size}`}
+	style:background-color={backgroundColor}
+	class:button--primary={primary}
+	class:button--secondary={!primary}
+>
+	{label}
+</button>
+
+<style>
+	.button {
+		@apply inline-block cursor-pointer rounded-full border-0 font-medium leading-none transition-colors;
+	}
+	.button--small {
+		@apply px-2 py-0.5 text-sm;
+	}
+	.button--normal {
+		@apply px-2 py-1 text-base;
+	}
+	.button--large {
+		@apply px-2.5 py-1 text-xl;
+	}
+	.button--primary {
+		@apply bg-rose-500 text-slate-700 hover:opacity-80;
+	}
+	.button--secondary {
+		@apply bg-teal-600 text-white hover:opacity-80;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 5e0a0e4..845dae4 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -18,7 +18,7 @@
 
 <style>
 	.navbar {
-		@apply flex items-center justify-between border-b-slate-200 bg-slate-100 px-6 py-2 drop-shadow;
+		@apply flex items-center justify-between border-slate-200 bg-slate-100 px-6 py-2 drop-shadow;
 	}
 
 	.navbar h1 {