[Closes #1] [Closes !5] Migrated from PrimeVue to shadcn

app/pages/config/Account.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="card">
-    <h1>Account</h1>
-  </div>
-</template>

app/pages/config/Settings.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="card">
-    <h1>Settings</h1>
-  </div>
-</template>

app/pages/index.vue

@@ -1,5 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Button } from "@/components/ui/button";
+
+const lastClicked = ref<string>("None");
+
+const buttonClicked = (variant: string) => {
+  lastClicked.value = variant;
+};
+</script>
+
 <template>
-  <div class="card">
-    <h1>Dashboard</h1>
+  <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+    <div class="bg-muted/50 aspect-video rounded-xl" />
+    <div class="bg-muted/50 aspect-video rounded-xl flex items-center justify-center gap-2">
+      <span class="text-primary">Last clicked button:</span>
+      <span class="font-bold text-lime-500">{{ lastClicked }}</span>
+    </div>
+    <div class="bg-muted/50 aspect-video rounded-xl" />
+  </div>
+  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2">
+    <Button variant="default" @click="buttonClicked('default')">Default</Button>
+    <Button variant="outline" @click="buttonClicked('outline')">Outline</Button>
+    <Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button>
+    <Button variant="link" @click="buttonClicked('link')">Link</Button>
+    <Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button>
+    <Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button>
   </div>
 </template>