+
+
+
+
+ + Sign in to your account +
++ Access exclusive content below. +
+
+
+
+ or
+
+
+
+
+
+
+
+
+
-
+ - {item.h1Content} -
-- {item.pContent} -
-+ {item.h1Content} +
++ {item.pContent} +
+ - {/* Right part */} + {/* Right part */}
- 
- 
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..99ca0db
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,51 @@
+import type { ChangeEvent, FocusEvent } from "react";
+
+interface InputProps {
+ type: "text" | "number" | "email" | "password";
+ label: string;
+ id: string;
+ value: string | number;
+ name: string;
+ placeholder: string;
+ error: string | undefined;
+ onChange: (e: ChangeEvent) => void;
+ onBlur: (e: FocusEvent) => void;
+}
+
+const Input = ({
+ type,
+ label,
+ id,
+ value,
+ name,
+ placeholder,
+ error,
+ onChange,
+ onBlur,
+}: InputProps) => {
+ return (
+ ({ name: "", email: "" });
+ const [errors, setErrors] = useState<
+ Partial>
+ >({});
+ const nameId = useId();
+ const emailId = useId();
+
+ const handleChange = (e: ChangeEvent) => {
+ const { name, value } = e.target;
+ setValues((prev) => ({ ...prev, [name]: value }));
+ };
+
+ const validate = (values: LoginValues) => {
+ const errors: Partial> = {};
+
+ if (!values.name) {
+ errors.name = "Name is required";
+ } else if (values.name.length < 2) {
+ errors.name = "Name must be at least 2 characters long";
+ }
+ if (!values.email) errors.email = "Email is required";
+ else if (!/\S+@\S+\.\S+/.test(values.email))
+ errors.email =
+ "Please enter a valid email address using the following format: name@example.com";
+
+ return errors;
+ };
+
+ const handleBlur = (e: FormEvent) => {
+ e.preventDefault();
+
+ const newErrors = validate(values);
+ setErrors(newErrors);
+ };
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+
+ const newErrors = validate(values);
+ setErrors(newErrors);
+
+ if (Object.keys(newErrors).length === 0) {
+ console.log("login successful", values);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LoginForm;
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..99ca0db
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,51 @@
+import type { ChangeEvent, FocusEvent } from "react";
+
+interface InputProps {
+ type: "text" | "number" | "email" | "password";
+ label: string;
+ id: string;
+ value: string | number;
+ name: string;
+ placeholder: string;
+ error: string | undefined;
+ onChange: (e: ChangeEvent
+
+
+ {error &&
+ );
+};
+
+export default Input;
diff --git a/src/components/ui/features/auth/LoginForm.tsx b/src/components/ui/features/auth/LoginForm.tsx
new file mode 100644
index 0000000..ae701b5
--- /dev/null
+++ b/src/components/ui/features/auth/LoginForm.tsx
@@ -0,0 +1,129 @@
+"use client";
+import Input from "@/components/ui/Input";
+import Image from "next/image";
+import { type ChangeEvent, type FormEvent, useId, useState } from "react";
+
+interface LoginValues {
+ name: string;
+ email: string;
+}
+
+const LoginForm = () => {
+ const [values, setValues] = useState{error}
} +