Move files

frontend/components/ui/Button.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// types
+type Props = {
+    variant?: "solid" | "secondary" | "outlined" | "ghost";
+    size?: "xl" | "lg" | "md";
+    startIcon?: string;
+    endIcon?: string;
+};
+
+// props
+const props = withDefaults(defineProps<Props>(), {
+    variant: "solid",
+    size: "lg",
+});
+const { variant, size } = toRefs(props);
+
+// computed
+const classes = computed(() => {
+    return [
+        "flex items-center justify-center transition-all cursor-pointer",
+        {
+            "btn-solid": variant.value === "solid",
+            "btn-secondary": variant.value === "secondary",
+            "btn-outlined": variant.value === "outlined",
+            "btn-ghost": variant.value === "ghost",
+        },
+        {
+            "btn-xl": size.value === "xl",
+            "btn-lg": size.value === "lg",
+            "btn-md": size.value === "md",
+        },
+    ];
+});
+</script>
+
+<template>
+    <button :class="classes">
+        <Icon v-if="startIcon" :name="startIcon" />
+        <slot />
+        <Icon v-if="endIcon" :name="endIcon" />
+    </button>
+</template>

frontend/components/ui/Input.vue

@@ -0,0 +1,52 @@
+<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>
+    <div v-bind="$attrs" :class="classes" @click="inputRef?.focus()">
+        <Icon v-if="startIcon" :name="startIcon" class="ms-0" size="24px" />
+        <input
+            ref="inputRef"
+            class="outline-none w-max"
+            :placeholder="placeholder"
+        />
+        <Icon v-if="endIcon" :name="endIcon" class="me-0" size="24px" />
+    </div>
+    <!-- <Tooltip :title="message" class="w-full">
+    </Tooltip> -->
+</template>

frontend/components/ui/Tooltip.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+
+// type
+type Props = {
+    title?: string
+}
+
+// prop
+defineProps<Props>();
+
+</script>
+
+<template>
+    <TooltipProvider
+        :disabled="!title"
+        :delay-duration="0"
+    >
+        <TooltipRoot>
+            <TooltipTrigger>
+                <slot />
+            </TooltipTrigger>
+            <TooltipPortal>
+                <TooltipContent
+                    class="bg-black text-white px-4 py-3 rounded-full"
+                    :side-offset="5"
+                >
+                    {{ title }}
+                    <TooltipArrow
+                        class="fill-black"
+                        :width="12"
+                        :height="6"
+                    />
+                </TooltipContent>
+            </TooltipPortal>
+        </TooltipRoot>
+    </TooltipProvider>
+</template>