landing desktop

src/components/ui/AppSelect.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="space-y-1.5">
+    <label v-if="label" :for="id" class="block text-sm font-medium text-muted">
+      {{ label }}
+    </label>
+    <select
+      :id="id"
+      :value="modelValue"
+      class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+      :class="ltr ? 'text-left' : ''"
+      @change="onChange"
+    >
+      <option v-if="placeholder" disabled value="">{{ placeholder }}</option>
+      <option v-for="opt in options" :key="opt.value" :value="opt.value">
+        {{ opt.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+  id?: string;
+  modelValue: string;
+  options: { value: string; label: string }[];
+  placeholder?: string;
+  ltr?: boolean;
+}>();
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
+
+function onChange(e: Event) {
+  emit('update:modelValue', (e.target as HTMLSelectElement).value);
+}
+</script>