Initial commit from monorepo

app/components/ui/Grid.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :class="gridClass">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  cols: {
+    type: [String, Number],
+    default: 1,
+  },
+  md: {
+    type: [String, Number],
+    default: null,
+  },
+  lg: {
+    type: [String, Number],
+    default: null,
+  },
+  gap: {
+    type: [String, Number],
+    default: 6,
+  },
+})
+
+const colMap: Record<string, string> = {
+  '1': 'grid-cols-1',
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-3',
+  '4': 'grid-cols-4',
+}
+
+const gapMap: Record<string, string> = {
+  '4': 'gap-4',
+  '6': 'gap-6',
+  '8': 'gap-8',
+}
+
+const gridClass = computed(() => {
+  const baseCols = colMap[String(props.cols)] || colMap['1']
+  const mdClass = props.md ? colMap[String(props.md)] : ''
+  const lgClass = props.lg ? colMap[String(props.lg)] : ''
+  const gapClass = gapMap[String(props.gap)] || gapMap['6']
+
+  const classes = ['grid', baseCols, gapClass]
+  if (mdClass) classes.push(`md:${mdClass}`)
+  if (lgClass) classes.push(`lg:${lgClass}`)
+
+  return classes.join(' ')
+})
+</script>