Update profile card to use element plus

components/card/Panel.vue

@@ -1,30 +1,31 @@
 <template>
-	<div
-		class="bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center"
-		:class="props.mode === 'horizontal' ? 'flex-row' : 'flex-col'">
-		<div class="flex flex-row items-center justify-start gap-4">
-			<Icon :name="props.icon" />
-			<div class="text-2xl font-bold">
-				{{ props.title }}
+	<el-card>
+		<div
+			class="flex h-fit w-full justify-start gap-8 text-center"
+			:class="props.mode === 'horizontal' ? 'flex-row' : 'flex-col'">
+			<div class="flex flex-row items-center justify-start gap-4">
+				<Icon :name="props.icon" />
+				<div class="text-2xl font-bold">
+					{{ props.title }}
+				</div>
 			</div>
-		</div>
-		<div class="flex flex-grow flex-row items-center gap-4">
-			<div class="w-full text-right text-2xl font-bold">
-				{{ props.data }}
+			<div class="flex flex-grow flex-row items-center gap-4">
+				<div class="w-full text-right text-2xl font-bold">
+					{{ props.data }}
+				</div>
 			</div>
 		</div>
-		<div class="flex flex-row items-center gap-4"> </div>
-	</div>
+	</el-card>
 </template>
 
 <script setup lang="ts">
-	interface Props {
-		mode: 'horizontal' | 'vertical'
-		icon: string
-		title: string
-		description?: string
-		data: string | number
-	}
+interface Props {
+	mode: 'horizontal' | 'vertical'
+	icon: string
+	title: string
+	description?: string
+	data: string | number
+}
 
-	const props = defineProps<Props>()
+const props = defineProps<Props>()
 </script>

components/header/Header.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+const router = useRouter()
+const user = useSupabaseUser()
+</script>
+
 <template>
 	<div
 		class="flex h-fit w-full flex-row items-center justify-center border-b border-[var(--el-border-color)] p-2">
@@ -23,6 +28,17 @@
 							<el-dropdown-item @click="navigateTo('/profile')"
 								>Profile</el-dropdown-item
 							>
+							<el-dropdown-item
+								v-if="user"
+								class="danger"
+								@click="userSignOut()"
+								>Sign Out</el-dropdown-item
+							>
+							<el-dropdown-item
+								v-else
+								@click="router.push('/login')"
+								>Sign In</el-dropdown-item
+							>
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
@@ -35,4 +51,7 @@
 :deep(.el-dropdown-menu__item) {
 	@apply px-8;
 }
+:deep(.el-dropdown-menu__item:not(.is-disabled):focus.danger) {
+	@apply bg-[--el-color-danger-light-9] text-[--el-color-danger];
+}
 </style>

pages/profile/index.vue

@@ -9,72 +9,55 @@
 				: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({
-		middleware: ['auth'],
-	})
+definePageMeta({
+	middleware: ['auth'],
+})
 
-	interface DashboardData {
-		noteCount: {
-			title: string
-			description: string
-			data: number
-			mode: 'horizontal' | 'vertical'
-			icon: string
-		}
+interface DashboardData {
+	noteCount: {
+		title: string
+		description: string
+		data: number
+		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({
-		user: {
-			title: 'Email',
-			description: 'User',
-			data: user.value?.email,
-			mode: 'horizontal',
-			icon: 'fa6-solid:envelope',
-		},
-		noteCount: {
-			title: 'Note Count',
-			description: 'The number of notes this account is currently having',
-			data: 0,
-			mode: 'horizontal',
-			icon: 'fa6-solid:note-sticky',
-		},
-	})
+const dashboardData: DashboardData = reactive({
+	user: {
+		title: 'Email',
+		description: 'User',
+		data: user.value?.email,
+		mode: 'horizontal',
+		icon: 'fa6-solid:envelope',
+	},
+	noteCount: {
+		title: 'Note Count',
+		description: 'The number of notes this account is currently having',
+		data: 0,
+		mode: 'horizontal',
+		icon: 'fa6-solid:note-sticky',
+	},
+})
 
-	const { refresh } = await useFetch('/api/profile', {
-		onResponse({ response }) {
-			dashboardData.noteCount.data = response._data.count
-		},
-	})
+const { refresh } = await useFetch('/api/profile', {
+	onResponse({ response }) {
+		dashboardData.noteCount.data = response._data.count
+	},
+})
 
-	onMounted(() => {
-		isLoading.value = true
-		refresh()
-		isLoading.value = false
-	})
+onMounted(() => {
+	isLoading.value = true
+	refresh()
+	isLoading.value = false
+})
 </script>