first commit

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div :class="cn('rounded-lg border bg-card text-card-foreground shadow-sm', props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div :class="cn('p-6 pt-0', props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <p :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </p>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div :class="cn('flex items-center p-6 pt-0', props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+        <slot />
+    </h3>
+</template>

resources/js/components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue';
+export { default as CardContent } from './CardContent.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';