From 5c4cf7e161853c1afcde3847108d06cdf38afa09 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 6 Feb 2023 15:50:38 +0800
Subject: [PATCH] added button component

---
 components/app/App.vue        |  2 +-
 components/element/Button.vue |  6 ++++++
 pages/notes/index.vue         | 27 +++++++++++++++++----------
 3 files changed, 24 insertions(+), 11 deletions(-)
 create mode 100644 components/element/Button.vue

diff --git a/components/app/App.vue b/components/app/App.vue
index c3a1477..f4ffaa7 100644
--- a/components/app/App.vue
+++ b/components/app/App.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="bg-primary flex h-screen w-full flex-col items-center px-12 text-white">
+		class="bg-primary flex h-screen w-full flex-col items-center gap-4 px-12 text-white">
 		<slot />
 	</div>
 </template>
diff --git a/components/element/Button.vue b/components/element/Button.vue
new file mode 100644
index 0000000..8db5001
--- /dev/null
+++ b/components/element/Button.vue
@@ -0,0 +1,6 @@
+<template>
+	<button
+		class="w-fit rounded-md p-2 font-bold transition-all duration-500 ease-out hover:px-4">
+		<slot />
+	</button>
+</template>
diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index 37b0787..cd2b80b 100644
--- a/pages/notes/index.vue
+++ b/pages/notes/index.vue
@@ -1,16 +1,23 @@
 <template>
 	<App>
 		<Header />
-
-		<button @click="userSignOut()">Sign Out</button>
-		<button @click="create()">
-			<Icon
-				v-if="isCreating"
-				name="loading" />
-			<Icon
-				v-if="!isCreating"
-				name="fa6-solid:square-plus" />
-		</button>
+		<div class="flex w-full max-w-3xl justify-end gap-4">
+			<ElementButton
+				@click="userSignOut()"
+				class="hover:bg-red-500 hover:text-black">
+				<Icon name="fa6-solid:arrow-right-from-bracket" />
+			</ElementButton>
+			<ElementButton
+				class="hover:bg-blue-500 hover:text-black"
+				@click="create()">
+				<Icon
+					v-if="isCreating"
+					name="loading" />
+				<Icon
+					v-if="!isCreating"
+					name="fa6-solid:square-plus" />
+			</ElementButton>
+		</div>
 
 		<div
 			class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4">