Update profile card to use element plus

components/card/Panel.vue

@@ -1,6 +1,7 @@
 <template>
+	<el-card>
 		<div
-		class="bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center"
+			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" />
@@ -13,18 +14,18 @@
 					{{ props.data }}
 				</div>
 			</div>
-		<div class="flex flex-row items-center gap-4"> </div>
 		</div>
+	</el-card>
 </template>
 
 <script setup lang="ts">
-	interface Props {
+interface Props {
 	mode: 'horizontal' | 'vertical'
 	icon: string
 	title: string
 	description?: string
 	data: string | number
-	}
+}
 
-	const props = defineProps<Props>()
+const props = defineProps<Props>()
 </script>