From 7c9c4faf2fd177ac5a325ed825a1799eb33892a3 Mon Sep 17 00:00:00 2001
From: Vojtech Simetka <vojtech@simetka.cz>
Date: Wed, 23 Nov 2022 17:52:25 +0100
Subject: [PATCH] feat: add button component

---
 src/lib/components/button.svelte | 30 ++++++++++++++++++++++++++++++
 src/routes/+page.svelte          | 11 +++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/lib/components/button.svelte
 create mode 100644 src/routes/+page.svelte

diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte
new file mode 100644
index 0000000..fa0df85
--- /dev/null
+++ b/src/lib/components/button.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	export let variant: 'light' | 'dark' = 'light';
+</script>
+
+<button class={`${variant} root`}>
+	<slot />
+</button>
+
+<style>
+	.root {
+		padding: 15px;
+		border: 1px solid var(--color-black);
+		border-radius: 50px;
+		cursor: pointer;
+		transition: 1s;
+	}
+	.light,
+	.dark:hover {
+		color: var(--color-black);
+		background-color: var(--color-white);
+		border-color: var(--color-light-grey);
+	}
+
+	.dark,
+	.light:hover {
+		color: var(--color-white);
+		background-color: var(--color-black);
+		border-color: var(--color-light-black);
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..86bf3bd
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import './styles.css';
+	import Header from '$lib/components/header.svelte';
+	import Button from '$lib/components/button.svelte';
+</script>
+
+<div>
+	<Header />
+	<Button>Light Button</Button>
+	<Button variant="dark">Dark Button</Button>
+</div>