Initial commit from monorepo

app/components/ui/Card.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="cardClass">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  padding: {
+    type: String,
+    default: 'medium', // none | small | medium
+  },
+  tone: {
+    type: String,
+    default: 'default', // default | muted | primary
+  },
+  interactive: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const paddingMap: Record<string, string> = {
+  none: '',
+  small: 'p-4',
+  medium: 'p-6',
+}
+
+const toneMap: Record<string, string> = {
+  default: 'bg-base-100',
+  muted: 'bg-base-200',
+  primary: 'bg-primary/10',
+}
+
+const cardClass = computed(() => {
+  const paddingClass = paddingMap[props.padding] || paddingMap.medium
+  const toneClass = toneMap[props.tone] || toneMap.default
+  const interactiveClass = props.interactive ? 'cursor-pointer hover:shadow-lg' : ''
+  const baseClass = 'card transition-all duration-200'
+  return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
+})
+</script>