Update profile card to use element plus

components/card/Panel.vue

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