package list from viandwi24

components/Card/Content.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="card-content px-6 py-6 relative">
+    <slot />
+  </div>
+</template>

components/Card/Footer.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="card-footer px-6 py-2 text-sm bg-white dark:bg-slate-800 border-t border-gray-900/10 dark:border-gray-50/[0.2]"
+  >
+    <slot />
+  </div>
+</template>

components/Card/Title.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="text-xl font-semibold mb-2">
+    <slot>{{ text }}</slot>
+  </div>
+</template>

components/Card/index.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+defineProps({
+  disabled: {
+    type: Boolean,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <div
+    class="card duration-300 transition-colors w-full relative rounded overflow-hidden bg-white dark:bg-slate-900 border border-gray-900/10 dark:border-gray-50/[0.2]"
+  >
+    <div
+      v-if="disabled"
+      class="absolute z-10 top-0 left-0 w-full h-full bg-slate-800/[0.75] cursor-not-allowed"
+    />
+    <slot />
+  </div>
+</template>