Create input component

frontend/components/Input.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+
+// types
+import Tooltip from "~/components/ui/Tooltip.vue";
+
+type Props = {
+    variant?: "solid" | "outlined",
+    startIcon?: string;
+    endIcon?: string;
+    disabled?: boolean;
+    error?: boolean;
+    message?: string;
+    placeholder?: string;
+}
+
+// props
+const props = withDefaults(defineProps<Props>(), {
+    variant: "solid"
+});
+const { variant, message, error, disabled } = toRefs(props);
+
+// state
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// computed
+const classes = computed(() => {
+    return [
+        "flex items-center cursor-text transition-all border-[1.5px] gap-3 typo-label-md p-4 rounded-100",
+        {
+            "input-solid": variant.value === "solid",
+            "input-outlined": variant.value === "outlined",
+            "input-effects": !error.value,
+            [variant.value === "solid" ? "input-solid-error" : "input-outlined-error"]: error.value
+        }
+    ];
+});
+
+</script>
+
+<template>
+    <Tooltip :title="message">
+        <div :class="classes" @click="inputRef?.focus()">
+            <Icon v-if="startIcon" :name="startIcon" class="ms-0" size="24px" />
+            <input ref="inputRef" class="outline-none" :placeholder="placeholder" />
+            <Icon v-if="endIcon" :name="endIcon" class="me-0" size="24px" />
+        </div>
+    </Tooltip>
+</template>