added button component

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>

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>

pages/notes/index.vue

@@ -1,16 +1,23 @@
 <template>
 	<App>
 		<Header />
-
+		<div class="flex w-full max-w-3xl justify-end gap-4">
-		<button @click="userSignOut()">Sign Out</button>
+			<ElementButton
-		<button @click="create()">
+				@click="userSignOut()"
-			<Icon
+				class="hover:bg-red-500 hover:text-black">
-				v-if="isCreating"
+				<Icon name="fa6-solid:arrow-right-from-bracket" />
-				name="loading" />
+			</ElementButton>
-			<Icon
+			<ElementButton
-				v-if="!isCreating"
+				class="hover:bg-blue-500 hover:text-black"
-				name="fa6-solid:square-plus" />
+				@click="create()">
-		</button>
+				<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">