Add sigh up layout

src/features/AuthInput.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Image from "next/image";
+import eye_off from "./icons/eye-off.svg";
+import eye_on from "./icons/eye-on.svg";
+import alert from "./icons/alert-circle.svg";
+import { useState } from "react";
+
+interface IAuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  isPassword?: boolean;
+  label: string;
+  error: string;
+}
+
+const AuthInput: React.FC<IAuthInputProps> = ({
+  isPassword,
+  label,
+  error,
+  placeholder,
+  name,
+  type,
+}: IAuthInputProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  return (
+    <div className="flex flex-col gap-[6px]">
+      <label className="text-[14px] leading-5 text-gray-700">{label}</label>
+      <div
+        className={`px-[10px] py-[14px] flex items-center border border-gray-300 rounded-lg shadow-sm bg-white${
+          error ? "-with-error" : "border border-red-400"
+        }`}
+      >
+        <input
+          name={name}
+          placeholder={placeholder}
+          className="w-full text-[16px] leading-6 text-gray-900"
+          type={!isPassword ? type : isOpen ? type : "password"}
+        />
+        {isPassword && (
+          <button onClick={() => setIsOpen((prev) => !prev)} type="button">
+            <Image src={isOpen ? eye_on : eye_off} alt="Eye Icon" />
+          </button>
+        )}
+      </div>
+      {error ? (
+        <p className="flex items-center justify-between text-[14px] font-normal leading-5 text-red-500">
+          {error} <Image src={alert} alt="Alert Icon" />
+        </p>
+      ) : null}
+    </div>
+  );
+};
+
+export default AuthInput;

src/features/icons/alert-circle.svg

@@ -0,0 +1,7 @@
+<svg width="14.666992" height="14.666992" viewBox="0 0 14.667 14.667" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs/>
+	<path id="Icon" d="M7.33398 14C3.65137 14 0.666992 11.0156 0.666992 7.33398C0.666992 3.65137 3.65137 0.666992 7.33398 0.666992C11.0156 0.666992 14 3.65137 14 7.33398C14 11.0156 11.0156 14 7.33398 14ZM7.33398 4.66699L7.33398 7.33398M7.33398 10L7.33984 10" stroke="#F04438" stroke-opacity="1.000000" stroke-width="1.333333" stroke-linejoin="round"/>
+</svg>

src/features/icons/eye-off.svg

@@ -0,0 +1,15 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip1668_50526">
+			<rect id="eye-off" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
+		</clipPath>
+	</defs>
+	<rect id="eye-off" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip1668_50526)">
+		<path id="Vector" d="M17.9404 17.9404C16.2305 19.2432 14.1494 19.9648 12 20C5 20 1 12 1 12C2.24414 9.68164 3.96875 7.65625 6.05957 6.05957M9.90039 4.24023C10.5879 4.0791 11.293 3.99805 12 4C19 4 23 12 23 12C22.3926 13.1357 21.6689 14.2051 20.8398 15.1904M14.1201 14.1201C13.8457 14.415 13.5137 14.6514 13.1465 14.8154C12.7783 14.9795 12.3809 15.0674 11.9785 15.0742C11.5752 15.0811 11.1748 15.0078 10.8018 14.8564C10.4277 14.7061 10.0889 14.4814 9.80371 14.1963C9.51855 13.9111 9.29395 13.5723 9.14355 13.1982C8.99219 12.8252 8.91895 12.4248 8.92578 12.0215C8.93262 11.6191 9.02051 11.2217 9.18457 10.8535C9.34863 10.4863 9.58496 10.1543 9.87988 9.87988" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
+		<path id="Vector" d="M1 1L23 23" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
+	</g>
+</svg>

src/features/icons/eye-on.svg

@@ -0,0 +1,15 @@
+<svg width="24.000000" height="24.000000" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip1668_50161">
+			<rect id="eye" width="24.000000" height="24.000000" fill="white" fill-opacity="0"/>
+		</clipPath>
+	</defs>
+	<rect id="eye" width="24.000000" height="24.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip1668_50161)">
+		<path id="Vector" d="M12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12C1 12 5 4 12 4Z" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
+		<path id="Vector" d="M12 15C10.3428 15 9 13.6572 9 12C9 10.3428 10.3428 9 12 9C13.6572 9 15 10.3428 15 12C15 13.6572 13.6572 15 12 15Z" stroke="#979797" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
+	</g>
+</svg>