Fix colors, replace Dropdown with Select, add clear layout

app/components/ui/input/InputWithIcon.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import { useVModel } from "@vueuse/core"
+
+interface Props {
+    defaultValue?: string | number
+    modelValue?: string | number
+    class?: HTMLAttributes["class"]
+    placeholder?: string
+    type?: string
+    icon?: any
+    iconSize?: string
+    id?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    placeholder: "Search...",
+    type: "text",
+    iconSize: "6",
+    id: "search"
+})
+
+const emits = defineEmits<{
+    (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+    <div class="relative w-full items-center">
+        <Input :id="id" :type="type" :placeholder="placeholder" :class="cn('pl-10', props.class)"
+            v-model="modelValue" />
+        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2" v-if="icon">
+            <component :is="icon" :class="`size-${iconSize} text-muted-foreground`" />
+        </span>
+    </div>
+</template>