Initial commit from monorepo

app/components/ui/IconCircle.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="circleClass">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md', // md | lg
+  },
+  tone: {
+    type: String,
+    default: 'primary', // primary | neutral
+  },
+})
+
+const sizeMap: Record<string, string> = {
+  md: 'w-16 h-16 text-2xl',
+  lg: 'w-20 h-20 text-3xl',
+}
+
+const toneMap: Record<string, string> = {
+  primary: 'bg-primary/10 text-primary',
+  neutral: 'bg-base-200 text-base-content',
+}
+
+const circleClass = computed(() => {
+  const sizeClass = sizeMap[props.size] || sizeMap.md
+  const toneClass = toneMap[props.tone] || toneMap.primary
+  return ['rounded-full flex items-center justify-center', sizeClass, toneClass].join(' ')
+})
+</script>