Add Form input component

src/app/components/FormInput/DatePicker.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+export const DatePicker = ({ label = "Select Date", onChange }) => {
+  const [date, setDate] = useState("");
+
+  const handleChange = (e) => {
+    setDate(e.target.value);
+    if (onChange) onChange(e.target.value);
+  };
+
+  return (
+    <div style={{ marginBottom: "1rem" }}>
+      <label>{label}</label>
+      <input
+        type="date"
+        value={date}
+        onChange={handleChange}
+        style={{ padding: "0.5rem", marginLeft: "0.5rem" }}
+      />
+      {date && <p>Selected Date: {date}</p>}
+    </div>
+  );
+};

src/app/components/FormInput/FileUpload.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+export const FileUpload = ({ onFileSelect }) => {
+  const [file, setFile] = useState(null);
+
+  const handleFile = (file) => {
+    setFile(file);
+    if (onFileSelect) onFileSelect(file);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    handleFile(e.dataTransfer.files[0]);
+  };
+
+  const handleChange = (e) => {
+    handleFile(e.target.files[0]);
+  };
+
+  return (
+    <div style={{ marginBottom: "1rem" }}>
+      <label
+        style={{
+          display: "block",
+          width: "300px",
+          height: "100px",
+          border: "2px dashed #aaa",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+        }}
+      >
+        {file ? file.name : "Drag & Drop file or click to upload"}
+        <input
+          type="file"
+          style={{ display: "none" }}
+          onChange={handleChange}
+          onDrop={handleDrop}
+          onDragOver={(e) => e.preventDefault()}
+        />
+      </label>
+    </div>
+  );
+};

src/app/components/FormInput/FormValidation.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+
+export const FormValidation = ({ minLength = 3, onSubmit }) => {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim() === "") {
+      setError("Field cannot be empty");
+    } else if (value.length < minLength) {
+      setError(`Minimum ${minLength} characters required`);
+    } else {
+      setError("");
+      if (onSubmit) onSubmit(value);
+      alert("Form submitted: " + value);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ marginBottom: "1rem" }}>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        style={{ padding: "0.5rem", marginRight: "0.5rem" }}
+        placeholder="Enter text"
+      />
+      <button type="submit">Submit</button>
+      {error && <p style={{ color: "red", marginTop: "0.5rem" }}>{error}</p>}
+    </form>
+  );
+};

src/app/components/FormInput/Slider.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+export const Slider = ({ min = 0, max = 100, step = 1, onChange }) => {
+  const [value, setValue] = useState((min + max) / 2);
+
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    if (onChange) onChange(e.target.value);
+  };
+
+  return (
+    <div style={{ marginBottom: "1rem" }}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+      />
+      <p>Value: {value}</p>
+    </div>
+  );
+};