complete login forgot signup page - init project

src/components/common/drop-down.tsx

@@ -0,0 +1,20 @@
+import { Menu, MenuButton } from '@headlessui/react'
+import { ArrowDown2 } from 'iconsax-react'
+import { FC } from 'react'
+
+type Props = {
+    title: string
+}
+
+export const DropDown: FC<Props> = ({ title }) => {
+    return (
+
+        <Menu as="div" className="w-full">
+            <MenuButton className="input-style flex flex-row justify-between items-center p-[18px]">
+                <p className='text-secondary-text-color/70 text-base font-normal'>{title}</p>
+                <ArrowDown2 className="size-5 text-secondary-text-color/70" />
+            </MenuButton>
+        </Menu>
+
+    )
+}

src/components/common/input.tsx

@@ -0,0 +1,26 @@
+import { Eye, EyeSlash } from "iconsax-react"
+import { FC, useState } from "react"
+
+type Props = {
+    style?: string,
+    type?: React.HTMLInputTypeAttribute,
+    placeholder: string,
+    icon?: React.ReactNode
+}
+
+export const Input: FC<Props> = ({ placeholder, type = "text", icon }) => {
+    const [hidden, setHidden] = useState<boolean>(false)
+    const handleHidden = () => setHidden(prev => !prev)
+    return (
+        <div className="w-full min-w-[250px] sm:min-w-[400px]">
+            <div className="relative w-full min-w-[200px]">
+                <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
+                    {type === "password" ?
+                        !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
+                        : icon}
+                </div>
+                <input type={type === "password" && hidden ? "text" : type} className="input-style" placeholder={placeholder} />
+            </div>
+        </div>
+    )
+}