Dashboard final version, TODO: update main sidebar menu

resources/js/Components/ui/card/Card.vue

@@ -8,8 +8,12 @@ const props = defineProps({
 
 <template>
   <div
+    data-slot="card"
     :class="
-      cn('rounded-xl border bg-card text-card-foreground shadow', props.class)
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
     "
   >
     <slot />

resources/js/Components/ui/card/CardAction.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="
+      cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/card/CardContent.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
     <slot />
   </div>
 </template>

resources/js/Components/ui/card/CardDescription.vue

@@ -7,7 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
     <slot />
   </p>
 </template>

resources/js/Components/ui/card/CardFooter.vue

@@ -7,7 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
     <slot />
   </div>
 </template>

resources/js/Components/ui/card/CardHeader.vue

@@ -7,7 +7,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
+  >
     <slot />
   </div>
 </template>

resources/js/Components/ui/card/CardTitle.vue

@@ -7,7 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <h3 :class="cn('font-semibold leading-none tracking-tight', props.class)">
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
     <slot />
   </h3>
 </template>

resources/js/Components/ui/card/index.js

@@ -1,4 +1,5 @@
 export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
 export { default as CardContent } from "./CardContent.vue";
 export { default as CardDescription } from "./CardDescription.vue";
 export { default as CardFooter } from "./CardFooter.vue";