Feat/87 create modal view

app/components/modal/addUserModal.tsx

@@ -0,0 +1,127 @@
+import { ChangeEvent, FormEvent, useState } from "react";
+
+interface AddUserContentProperties {
+  toggleShow: (show: boolean) => void;
+}
+
+const AddUserContent: React.FC<AddUserContentProperties> = ({ toggleShow }) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [errors, setErrors] = useState({
+    name: "",
+    email: "",
+    phoneNumber: "",
+  });
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = event.target;
+    if (id === "name") setName(value);
+    if (id === "email") setEmail(value);
+    if (id === "phoneNumber") setPhoneNumber(value);
+  };
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    const newErrors = {
+      name: "",
+      email: "",
+      phoneNumber: "",
+    };
+
+    if (!name.trim()) {
+      newErrors.name = "Name is required";
+    }
+    if (!email.trim()) {
+      newErrors.email = "Email is required";
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      newErrors.email = "Email address is invalid";
+    }
+    if (!phoneNumber.trim()) {
+      newErrors.phoneNumber = "Phone number is required";
+    }
+    if (newErrors.name || newErrors.email || newErrors.phoneNumber) {
+      setErrors(newErrors);
+    } else {
+      setName("");
+      setEmail("");
+      setPhoneNumber("");
+      setErrors({
+        name: "",
+        email: "",
+        phoneNumber: "",
+      });
+      toggleShow(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h2 className="text-xl">Add new user</h2>
+      <p className="text-loading-hover">Create a new user</p>
+      <div className="flex">
+        <div className="my-5 h-20 w-20 rounded-full bg-[hsl(0,0%,85%)]">
+          <input
+            type="file"
+            alt=""
+            className="h-20 w-20 rounded-full bg-[#D9D9D9] opacity-0"
+          />
+        </div>
+        <div className="mx-4 my-auto">
+          <p>Upload Picture</p>
+          <div className="relative">
+            <p className="absolute text-primary">Click to upload</p>
+            <input type="file" className="w-28 opacity-0" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <div className="my-2 flex flex-col">
+          <label htmlFor="name">Name</label>
+          <input
+            type="text"
+            id="name"
+            value={name}
+            onChange={handleChange}
+            placeholder="e.g John Doe"
+            className="my-2 rounded-lg border-2 p-2 outline-[#CBD5E1] focus:border-none"
+          />
+          {errors.name && <p className="text-error">{errors.name}</p>}
+        </div>
+        <div className="my-2 flex flex-col">
+          <label htmlFor="email">Email</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={handleChange}
+            placeholder="e.g [email protected]"
+            className="my-2 rounded-lg border-2 p-2 outline-[#CBD5E1] focus:border-none"
+          />
+          {errors.email && <p className="text-error">{errors.email}</p>}
+        </div>
+        <div className="my-2 flex flex-col">
+          <label htmlFor="phoneNumber">Phone number</label>
+          <input
+            type="text"
+            id="phoneNumber"
+            value={phoneNumber}
+            onChange={handleChange}
+            placeholder="e.g 08123456789"
+            className="my-2 rounded-lg border-2 p-2 outline-[#CBD5E1] focus:border-none"
+          />
+          {errors.phoneNumber && (
+            <p className="text-error">{errors.phoneNumber}</p>
+          )}
+        </div>
+      </div>
+      <div className="flex justify-end">
+        <button type="submit" className="rounded-lg bg-primary p-3 text-white">
+          Add New User
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default AddUserContent;

app/components/modal/deleteUser.tsx

@@ -0,0 +1,39 @@
+import { Button } from "../ui/button";
+
+interface DeleteUserContentProperties {
+  toggleShow: (show: boolean) => void;
+}
+
+const DeleteUserContent: React.FC<DeleteUserContentProperties> = ({
+  toggleShow,
+}) => {
+  return (
+    <div className="">
+      <h1 className="text-xl font-semibold">
+        {" "}
+        Are you sure you want to delete?{" "}
+      </h1>
+      <p className="py-2 text-[#64748B]">
+        {" "}
+        This action cannot be undone. This will permanently delete this user
+        from the database.{" "}
+      </p>
+      <div className="mt-2 flex justify-end">
+        <Button
+          className="m-2 border bg-background text-neutral-2 hover:bg-background"
+          onClick={() => toggleShow(false)}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="bg-error hover:bg-error m-2"
+          onClick={() => toggleShow(false)}
+        >
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteUserContent;

app/components/modal/modal.tsx

@@ -0,0 +1,49 @@
+import React, { ReactNode, useEffect, useRef } from "react";
+
+import { Card } from "../ui/card";
+
+interface ModalProperties {
+  className?: string;
+  show: boolean;
+  toggleShow: (show: boolean) => void;
+  children: ReactNode;
+}
+
+const Modal: React.FC<ModalProperties> = ({
+  className,
+  show,
+  toggleShow,
+  children,
+}) => {
+  const modal = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (modal.current && !modal.current.contains(event.target as Node)) {
+        toggleShow(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [toggleShow]);
+
+  return (
+    <Card>
+      {show && (
+        <div className="fixed inset-0 z-50 flex h-screen w-screen items-center justify-center bg-black/20">
+          <div
+            className={`relative m-8 h-fit max-w-2xl rounded-lg bg-background p-5 md:w-[28%] ${className}`}
+            ref={modal}
+          >
+            <div className="max- w-full">{children}</div>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default Modal;