⚡ enhance (pub): adjust component

app/components/pub/ui/select/Select.vue

@@ -1,8 +1,29 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import { SelectRoot } from 'radix-vue'
+import {
+  SelectTrigger,
+  SelectContent,
+  SelectValue,
+  SelectGroup,
+  SelectItem,
+  SelectSeparator,
+} from '~/components/pub/ui/select'
+import type { SelectRootProps, SelectRootEmits } from 'radix-vue'
+import { useForwardPropsEmits } from 'radix-vue'
 
-const props = defineProps<SelectRootProps>()
+interface Item {
+  value: string
+  label: string
+}
+
+const props = defineProps<
+  SelectRootProps & {
+    items: Item[]
+    placeholder?: string
+    label?: string
+    separator?: boolean
+  }
+>()
 const emits = defineEmits<SelectRootEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
@@ -10,6 +31,27 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <SelectRoot v-bind="forwarded">
-    <slot />
+    <SelectTrigger class="">
+      <SelectValue :placeholder="placeholder" />
+    </SelectTrigger>
+
+    <SelectContent class="rounded border bg-white">
+      <SelectGroup>
+        <SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
+          {{ label }}
+        </SelectLabel>
+
+        <SelectItem
+          v-for="item in items"
+          :key="item.value"
+          :value="item.value"
+          class="cursor-pointer px-2 py-1 hover:bg-gray-100"
+        >
+          {{ item.label }}
+        </SelectItem>
+
+        <SelectSeparator v-if="separator" class="my-1 h-px bg-gray-200" />
+      </SelectGroup>
+    </SelectContent>
   </SelectRoot>
 </template>