From ab4531064ea89f83c2cc1867ad8a10b6b9f4037c Mon Sep 17 00:00:00 2001
From: Artemy Egorov <artegoser@gmail.com>
Date: Sun, 27 Aug 2023 19:39:15 +0300
Subject: [PATCH] feat: Main Button

---
 src/app.html                             | 21 ++++++++++++---------
 src/lib/components/buttons/Button.svelte | 15 +++++++++++++++
 src/routes/+layout.svelte                |  4 +++-
 src/routes/+page.svelte                  | 13 +++++++++++++
 4 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/buttons/Button.svelte
diff --git a/src/app.html b/src/app.html
index effe0d0..a31bcf7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+
+<body class="bg-white dark:bg-zinc-900" data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
 </html>
diff --git a/src/lib/components/buttons/Button.svelte b/src/lib/components/buttons/Button.svelte
new file mode 100644
index 0000000..b9800e2
--- /dev/null
+++ b/src/lib/components/buttons/Button.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let href: string;
+	export let width = 48;
+	export let color = 'bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800';
+	export let className = '';
+	export let onClick: () => void;
+</script>
+
+<a on:click={onClick} {href}>
+	<div
+		class="transition-transform ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 p-2 m-2 text-lg rounded-2xl w-{width} {color} {className}"
+	>
+		<slot />
+	</div>
+</a>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2e511e0..e1cc6d4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,4 +2,6 @@
 	import '../app.css';
 </script>
 
-<slot />
+<div class="text-black dark:text-white">
+	<slot />
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c5bf9a7..2162afd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1 +1,14 @@
+<script>
+	import Button from '$lib/components/buttons/Button.svelte';
+
+	let count = 0;
+	let text = `Clicked ${count} ${count === 1 ? 'time' : 'times'}`;
+	function handleClick() {
+		count += 1;
+		text = `Clicked ${count} ${count === 1 ? 'time' : 'times'}`;
+	}
+</script>
+
 <h1 class="text-3xl font-bold underline">AnoPaper!</h1>
+
+<Button onClick={handleClick} href="#">{text}</Button>
