Update profile page to use element plus

pages/profile/index.vue

@@ -9,33 +9,16 @@
 				:title="data.title"
 				:description="data.description"
 				:data="data.data" />
-
-			<div class="flex gap-4">
-				<button
-					v-if="user"
-					@click="userSignOut()"
-					class="w-fit rounded-md p-2 font-bold transition duration-500 ease-out hover:bg-red-500 hover:text-black">
-					<Icon name="fa6-solid:arrow-right-from-bracket" />
-					Sign Out
-				</button>
-				<button
-					v-else
-					@click="router.push('/login')"
-					class="w-fit rounded-md p-2 font-bold transition duration-500 ease-out hover:bg-blue-500 hover:text-black">
-					<Icon name="fa6-solid:arrow-right-to-bracket" />
-					Log In
-				</button>
-			</div>
 		</template>
 	</NuxtLayout>
 </template>
 
 <script setup lang="ts">
-	definePageMeta({
+definePageMeta({
 	middleware: ['auth'],
-	})
+})
 
-	interface DashboardData {
+interface DashboardData {
 	noteCount: {
 		title: string
 		description: string
@@ -43,13 +26,13 @@
 		mode: 'horizontal' | 'vertical'
 		icon: string
 	}
-	}
+}
 
-	const router = useRouter()
-	const user = useSupabaseUser()
-	const isLoading = ref<boolean>(true)
+const router = useRouter()
+const user = useSupabaseUser()
+const isLoading = ref<boolean>(true)
 
-	const dashboardData: DashboardData = reactive({
+const dashboardData: DashboardData = reactive({
 	user: {
 		title: 'Email',
 		description: 'User',
@@ -64,17 +47,17 @@
 		mode: 'horizontal',
 		icon: 'fa6-solid:note-sticky',
 	},
-	})
+})
 
-	const { refresh } = await useFetch('/api/profile', {
+const { refresh } = await useFetch('/api/profile', {
 	onResponse({ response }) {
 		dashboardData.noteCount.data = response._data.count
 	},
-	})
+})
 
-	onMounted(() => {
+onMounted(() => {
 	isLoading.value = true
 	refresh()
 	isLoading.value = false
-	})
+})
 </script>