homevue

src/components/dashboard/DashboardCard.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { ref } from "vue";
+
+defineOptions({ name: "DashboardCard" });
+
+const props = defineProps({
+  title: { type: String, required: true },
+  step: { type: String, default: "" },
+  defaultOpen: { type: Boolean, default: true },
+  grow: { type: Boolean, default: false },
+});
+
+const open = ref(props.defaultOpen);
+
+function toggle() {
+  open.value = !open.value;
+}
+</script>
+
+<template>
+  <section
+    class="dashboard-card"
+    :class="{ 'dashboard-card--grow': props.grow }"
+  >
+    <header class="dashboard-card-header cursor-pointer" @click="toggle">
+      <div class="flex min-w-0 items-center gap-2">
+        <span v-if="props.step" class="step-badge">{{ props.step }}</span>
+        <h3 class="dashboard-card-title truncate">{{ props.title }}</h3>
+      </div>
+      <svg
+        class="dashboard-chevron shrink-0"
+        :class="{ 'dashboard-chevron--open': open }"
+        viewBox="0 0 48 48"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="4"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M39.6 17.443 24.043 33 8.487 17.443" />
+      </svg>
+    </header>
+    <div v-show="open" class="dashboard-card-body">
+      <slot />
+    </div>
+  </section>
+</template>

src/components/dashboard/StepBadge.vue

@@ -0,0 +1,9 @@
+<script setup>
+defineProps({
+  step: { type: String, required: true },
+});
+</script>
+
+<template>
+  <span class="step-badge">{{ step }}</span>
+</template>