feat(front): add SelectField and SwitchField components for enhanced form handling in file sharing

front/components/Field/SelectField.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select'
+type SelectValue = string | number
+const props = defineProps<{
+    name: string
+    placeholder?: string
+    label?: string
+    rules?: string
+    options?: {
+        label?: string
+        value: SelectValue
+    }[]
+}>()
+const { value } = useField<SelectValue>(props.name, props?.rules)
+</script>
+
+<template>
+    <Select v-model="value">
+        <SelectTrigger>
+            <SelectValue :placeholder="placeholder" />
+        </SelectTrigger>
+        <SelectContent>
+            <SelectGroup>
+                <SelectLabel class="text-xs" v-if="label">{{ label }}</SelectLabel>
+                <SelectItem v-for="item in options" :key="item.value" :value="item.value">
+                    {{ item?.label ?? item.value }}
+                </SelectItem>
+            </SelectGroup>
+        </SelectContent>
+    </Select>
+</template>