From 9df97141c15f32e20f09e903e16e3b5c68604b3e Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 17:28:53 +0100
Subject: [PATCH 01/15] testing branch

---
 .../ui/formComponents/form.module.css         | 11 +++
 .../ui/formComponents/formComponent.tsx       | 86 +++++++++++++++++++
 .../ui/formComponents/formSchema.tsx          |  8 ++
 .../ui/formComponents/formSubmit.tsx          | 17 ++++
 .../ui/formComponents/handleImageUpload.tsx   | 15 ++++
 .../ui/formComponents/uploadPicture.tsx       | 46 ++++++++++
 6 files changed, 183 insertions(+)
 create mode 100644 app/components/ui/formComponents/form.module.css
 create mode 100644 app/components/ui/formComponents/formComponent.tsx
 create mode 100644 app/components/ui/formComponents/formSchema.tsx
 create mode 100644 app/components/ui/formComponents/formSubmit.tsx
 create mode 100644 app/components/ui/formComponents/handleImageUpload.tsx
 create mode 100644 app/components/ui/formComponents/uploadPicture.tsx

diff --git a/app/components/ui/formComponents/form.module.css b/app/components/ui/formComponents/form.module.css
new file mode 100644
index 00000000..de2f733d
--- /dev/null
+++ b/app/components/ui/formComponents/form.module.css
@@ -0,0 +1,11 @@
+/* InputForm.module.css */
+.placeholderCustom::placeholder {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    
+  }
+  
+
+  
\ No newline at end of file
diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
new file mode 100644
index 00000000..3314f52c
--- /dev/null
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "~/components/ui/for";
+import { Input } from "~/components/ui/input";
+import { toast } from "~/components/ui/use-toast";
+import { Button } from "../button";
+import { FormSchema } from "./formSchema";
+
+export function InputForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      number: "",
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    console.log(data);
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">
+            {JSON.stringify(data, undefined, 2)}
+          </code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>name</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="number"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Phone Number</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/app/components/ui/formComponents/formSchema.tsx b/app/components/ui/formComponents/formSchema.tsx
new file mode 100644
index 00000000..dc4560d3
--- /dev/null
+++ b/app/components/ui/formComponents/formSchema.tsx
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+const phoneRegex = new RegExp(/^(\+?[\d\s]+)?(\d{3}|\(?\d+\))?(-?\s?\d)+$/);
+export const FormSchema = z.object({
+  name: z.string().min(2),
+  email: z.string().email(),
+  number: z.string().regex(phoneRegex, "Invalid Number!"),
+});
diff --git a/app/components/ui/formComponents/formSubmit.tsx b/app/components/ui/formComponents/formSubmit.tsx
new file mode 100644
index 00000000..f0017918
--- /dev/null
+++ b/app/components/ui/formComponents/formSubmit.tsx
@@ -0,0 +1,17 @@
+import z from "zod";
+
+import { FormSchema } from "./formSchema";
+
+// import { toast } from "./use-toast"
+
+export function submit(data: z.infer<typeof FormSchema>) {
+  console.log("submited", data);
+  // toast({
+  //   title: "You submitted the following values:",
+  //   description: (
+  //     <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+  //       <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+  //     </pre>
+  //   ),
+  // })
+}
diff --git a/app/components/ui/formComponents/handleImageUpload.tsx b/app/components/ui/formComponents/handleImageUpload.tsx
new file mode 100644
index 00000000..d77a316d
--- /dev/null
+++ b/app/components/ui/formComponents/handleImageUpload.tsx
@@ -0,0 +1,15 @@
+import { ChangeEvent } from "react";
+
+export const handleImageUpload = (
+  event: ChangeEvent<HTMLInputElement>,
+  setBackgroundImage: (image: string | null) => void,
+) => {
+  const file = event.target.files?.[0];
+  if (file && file.type.startsWith("image/")) {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      setBackgroundImage(reader.result as string);
+    });
+    reader.readAsDataURL(file);
+  }
+};
diff --git a/app/components/ui/formComponents/uploadPicture.tsx b/app/components/ui/formComponents/uploadPicture.tsx
new file mode 100644
index 00000000..a0aefbc2
--- /dev/null
+++ b/app/components/ui/formComponents/uploadPicture.tsx
@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import { ChangeEvent, useState } from "react";
+
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { handleImageUpload } from "./handleImageUpload";
+
+export function UploadPicture() {
+  const [backgroundImage, setBackgroundImage] = useState<
+    string | null | undefined
+  >();
+  return (
+    <div className="mb-3 flex items-center gap-1.5">
+      <div
+        className={clsx(
+          "image h-[59px] w-[59px] rounded-full bg-gray-500 bg-cover bg-center bg-no-repeat",
+          {
+            "image-background": backgroundImage,
+          },
+        )}
+        style={
+          backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {}
+        }
+      ></div>
+      <div className="flex flex-col gap-1">
+        <Label>Upload Picture</Label>
+        <Label
+          htmlFor="picture"
+          className="cursor-pointer text-xs text-orange-500"
+        >
+          Click to Upload
+        </Label>
+        <Input
+          id="picture"
+          type="file"
+          accept="image/*"
+          hidden
+          className="hidden"
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            handleImageUpload(event, setBackgroundImage)
+          }
+        />
+      </div>
+    </div>
+  );
+}

From ac6b33e8fed381018ba6690ae19931be07929935 Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 17:18:56 +0100
Subject: [PATCH 02/15] merging and rebasing branch

---
 app/components/addUserModel/addUserModal.tsx |  18 ++
 app/components/ui/form.tsx                   | 178 +++++++++++++++++
 app/components/ui/toast.tsx                  | 129 ++++++++++++
 app/components/ui/toaster.tsx                |  35 ++++
 app/components/ui/use-toast.ts               | 194 +++++++++++++++++++
 app/routes/_index.tsx                        |  74 +++++++
 package.json                                 |   1 +
 pnpm-lock.yaml                               |  45 +++++
 8 files changed, 674 insertions(+)
 create mode 100644 app/components/addUserModel/addUserModal.tsx
 create mode 100644 app/components/ui/form.tsx
 create mode 100644 app/components/ui/toast.tsx
 create mode 100644 app/components/ui/toaster.tsx
 create mode 100644 app/components/ui/use-toast.ts

diff --git a/app/components/addUserModel/addUserModal.tsx b/app/components/addUserModel/addUserModal.tsx
new file mode 100644
index 00000000..104c091a
--- /dev/null
+++ b/app/components/addUserModel/addUserModal.tsx
@@ -0,0 +1,18 @@
+import { InputForm } from "../ui/formComponents/formComponent";
+import { UploadPicture } from "../ui/formComponents/uploadPicture";
+
+const AddUserModal = () => {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="h-[514px] w-[422px] rounded bg-white p-[43px] shadow-lg">
+        <h2 className="text-lg font-semibold">Add new user</h2>
+        <p className="mb-4 mt-0 text-xs">Create New User</p>
+        <UploadPicture />
+
+        <InputForm />
+      </div>
+    </div>
+  );
+};
+
+export default AddUserModal;
diff --git a/app/components/ui/form.tsx b/app/components/ui/form.tsx
new file mode 100644
index 00000000..a00a8e12
--- /dev/null
+++ b/app/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "app/lib/utils/cn"
+import { Label } from "app/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/app/components/ui/toast.tsx b/app/components/ui/toast.tsx
new file mode 100644
index 00000000..33a35698
--- /dev/null
+++ b/app/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "app/lib/utils/cn"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/app/components/ui/toaster.tsx b/app/components/ui/toaster.tsx
new file mode 100644
index 00000000..69aea1f8
--- /dev/null
+++ b/app/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "app/components/ui/toast"
+import { useToast } from "app/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/app/components/ui/use-toast.ts b/app/components/ui/use-toast.ts
new file mode 100644
index 00000000..8a1df22e
--- /dev/null
+++ b/app/components/ui/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "app/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 9648215d..9150fcad 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,9 +1,14 @@
 import type { MetaFunction } from "@remix-run/node";
 
+import AddUserModal from "~/components/addUserModel/addUserModal";
 import BlogPost from "~/components/BlogPost";
 import HeroSection from "~/components/HeroSection";
+import { Button } from "~/components/ui/button";
+import CardPlatform from "~/components/ui/card/card-platform";
 import Footer from "~/components/ui/footer";
 import Header from "~/components/ui/header";
+import OtpAuth from "~/components/ui/otp/OtpAuth";
+import { Input } from "~/types/otpauth";
 
 export const meta: MetaFunction = () => {
   return [
@@ -19,6 +24,75 @@ export default function Index() {
       <HeroSection />
       <BlogPost />
       <Footer />
+      <div className="p-4 font-sans">
+        <h1 className="text-3xl">Welcome to Remix</h1>
+        <ul className="mt-4 list-disc space-y-2 pl-6">
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/start/quickstart"
+              rel="noreferrer"
+            >
+              5m Quick Start
+            </a>
+          </li>
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/start/tutorial"
+              rel="noreferrer"
+            >
+              30m Tutorial
+            </a>
+          </li>
+          <Button>Hello</Button>
+          <div>
+            <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button>
+          </div>
+          <div className="p-2">
+            <CardPlatform
+              logo="/images/g-drive-icon.svg"
+              heading="Drive"
+              description="Store, share, and collaborate on documents and files securely"
+              containerClassName="max-w-[341px]"
+            />
+          </div>
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/docs"
+              rel="noreferrer"
+            >
+              Remix Docs
+            </a>
+          </li>
+          <li>
+            <Link
+              className="text-blue-700 underline visited:text-purple-900"
+              to="/magic-success"
+            >
+              Magic Link Login Success
+            </Link>
+          </li>
+        </ul>
+        <OtpAuth
+          isModalOpen={openModal}
+          setIsModalOpen={() => setOpenModal(!openModal)}
+          inputs={[
+            { name: "input1", value: "" },
+            { name: "input1", value: "" },
+            { name: "input1", value: "" },
+            { name: "input1", value: "" },
+            { name: "input1", value: "" },
+            { name: "input1", value: "" },
+          ]}
+          handleSubmit={handleSubmit}
+        />
+        <AddUserModal />
+      </div>
     </div>
   );
 }
diff --git a/package.json b/package.json
index 92e29012..d560fb67 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
     "@react-email/components": "^0.0.21",
     "@remix-run/css-bundle": "^2.10.3",
     "@remix-run/node": "^2.10.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c79f1b07..b3b3292a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast':
+        specifier: ^1.2.1
+        version: 1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@react-email/components':
         specifier: ^0.0.21
         version: 0.0.21(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1255,6 +1258,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toast@1.2.1':
+    resolution: {integrity: sha512-5trl7piMXcZiCq7MW6r8YYmu0bK5qDpTWz+FdEPdKyft2UixkspheYbjbrLXVN5NGKHFbOP7lm8eD0biiSqZqg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-toggle-group@1.1.0':
     resolution: {integrity: sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==}
     peerDependencies:
@@ -6369,6 +6385,26 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-toast@1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-toggle-group@1.1.0(@types/react-dom@18.3.0)(@types/react@18.2.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -6503,6 +6539,15 @@ snapshots:
       '@types/react': 18.2.47
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/rect@1.1.0': {}
 
   '@react-email/body@0.0.8(react@18.3.1)':

From 91ce7e3f5f584e31be3e0d5de9a0d3594edc69ba Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 17:32:05 +0100
Subject: [PATCH 03/15] rebased my branch to master

---
 app/components/ui/formComponents/formComponent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
index 3314f52c..0f9ddabf 100644
--- a/app/components/ui/formComponents/formComponent.tsx
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -10,7 +10,7 @@ import {
   FormField,
   FormItem,
   FormLabel,
-} from "~/components/ui/for";
+} from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
 import { toast } from "~/components/ui/use-toast";
 import { Button } from "../button";

From 78177e719e847e164a8e04a03b0b75144a53be16 Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 19:32:13 +0100
Subject: [PATCH 04/15] finished work on the responsiveness

---
 app/components/addUserModel/addUserModal.tsx  |  7 +-
 .../ui/formComponents/form.module.css         |  1 +
 .../ui/formComponents/formComponent.tsx       | 76 +++++++++++++++++--
 .../ui/formComponents/formSubmit.tsx          | 19 +++--
 .../ui/formComponents/uploadPicture.tsx       |  8 +-
 tailwind.config.ts                            |  4 +
 6 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/app/components/addUserModel/addUserModal.tsx b/app/components/addUserModel/addUserModal.tsx
index 104c091a..a2ecaa5a 100644
--- a/app/components/addUserModel/addUserModal.tsx
+++ b/app/components/addUserModel/addUserModal.tsx
@@ -4,11 +4,10 @@ import { UploadPicture } from "../ui/formComponents/uploadPicture";
 const AddUserModal = () => {
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="h-[514px] w-[422px] rounded bg-white p-[43px] shadow-lg">
-        <h2 className="text-lg font-semibold">Add new user</h2>
-        <p className="mb-4 mt-0 text-xs">Create New User</p>
+      <div className="h-[514px] w-[422px] rounded border bg-white p-[43px] max-[530px]:w-[90%]">
+        <h2 className="text-[18px] text-lg font-bold">Add new user</h2>
+        <p className="mb-4 mt-0 text-[12px]">Create New User</p>
         <UploadPicture />
-
         <InputForm />
       </div>
     </div>
diff --git a/app/components/ui/formComponents/form.module.css b/app/components/ui/formComponents/form.module.css
index de2f733d..ad6dc3c7 100644
--- a/app/components/ui/formComponents/form.module.css
+++ b/app/components/ui/formComponents/form.module.css
@@ -4,6 +4,7 @@
     font-weight: 400;
     line-height: 24px;
     text-align: left;
+    color: #94A3B8;
     
   }
   
diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
index 0f9ddabf..5e89c30c 100644
--- a/app/components/ui/formComponents/formComponent.tsx
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -14,6 +15,7 @@ import {
 import { Input } from "~/components/ui/input";
 import { toast } from "~/components/ui/use-toast";
 import { Button } from "../button";
+import styles from "./form.module.css";
 import { FormSchema } from "./formSchema";
 
 export function InputForm() {
@@ -42,15 +44,33 @@ export function InputForm() {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
         <FormField
           control={form.control}
           name="name"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>name</FormLabel>
+              <FormLabel
+                className={clsx(
+                  "font-inter text-[14px] font-[500] text-[#0F172A]",
+                  {
+                    "text-red-500": form.formState.errors.name,
+                  },
+                )}
+              >
+                name
+              </FormLabel>
               <FormControl>
-                <Input placeholder="shadcn" {...field} />
+                <Input
+                  placeholder="shadcn"
+                  {...field}
+                  className={clsx(
+                    `${styles.placeholderCustom} placeholderCustom`,
+                    {
+                      "border-red-500": form.formState.errors.name,
+                    },
+                  )}
+                />
               </FormControl>
             </FormItem>
           )}
@@ -60,9 +80,27 @@ export function InputForm() {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel
+                className={clsx(
+                  "font-inter text-[14px] font-[500] text-[#0F172A]",
+                  {
+                    "text-red-500": form.formState.errors.email,
+                  },
+                )}
+              >
+                Email
+              </FormLabel>
               <FormControl>
-                <Input placeholder="shadcn" {...field} />
+                <Input
+                  placeholder="shadcn"
+                  {...field}
+                  className={clsx(
+                    `${styles.placeholderCustom} placeholderCustom`,
+                    {
+                      "border-red-500": form.formState.errors.email,
+                    },
+                  )}
+                />
               </FormControl>
             </FormItem>
           )}
@@ -72,14 +110,36 @@ export function InputForm() {
           name="number"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Phone Number</FormLabel>
+              <FormLabel
+                className={clsx(
+                  "font-inter text-[14px] font-[500] text-[#0F172A]",
+                  {
+                    "text-red-500": form.formState.errors.number,
+                  },
+                )}
+              >
+                Phone Number
+              </FormLabel>
               <FormControl>
-                <Input placeholder="shadcn" {...field} />
+                <Input
+                  placeholder="shadcn"
+                  {...field}
+                  className={clsx(
+                    `${styles.placeholderCustom} placeholderCustom`,
+                    {
+                      "border-red-500": form.formState.errors.number,
+                    },
+                  )}
+                />
               </FormControl>
             </FormItem>
           )}
         />
-        <Button type="submit">Submit</Button>
+        <div className="flex pt-2">
+          <Button type="submit" className="font-inter ml-auto">
+            Add New User
+          </Button>
+        </div>
       </form>
     </Form>
   );
diff --git a/app/components/ui/formComponents/formSubmit.tsx b/app/components/ui/formComponents/formSubmit.tsx
index f0017918..17951458 100644
--- a/app/components/ui/formComponents/formSubmit.tsx
+++ b/app/components/ui/formComponents/formSubmit.tsx
@@ -1,17 +1,16 @@
 import z from "zod";
 
+import { toast } from "~/components/ui/use-toast";
 import { FormSchema } from "./formSchema";
 
-// import { toast } from "./use-toast"
-
 export function submit(data: z.infer<typeof FormSchema>) {
   console.log("submited", data);
-  // toast({
-  //   title: "You submitted the following values:",
-  //   description: (
-  //     <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-  //       <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-  //     </pre>
-  //   ),
-  // })
+  toast({
+    title: "You submitted the following values:",
+    description: (
+      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+        <code className="text-white">{JSON.stringify(data, undefined, 2)}</code>
+      </pre>
+    ),
+  });
 }
diff --git a/app/components/ui/formComponents/uploadPicture.tsx b/app/components/ui/formComponents/uploadPicture.tsx
index a0aefbc2..0c925013 100644
--- a/app/components/ui/formComponents/uploadPicture.tsx
+++ b/app/components/ui/formComponents/uploadPicture.tsx
@@ -10,10 +10,10 @@ export function UploadPicture() {
     string | null | undefined
   >();
   return (
-    <div className="mb-3 flex items-center gap-1.5">
+    <div className="mb-3 flex items-center gap-[13px]">
       <div
         className={clsx(
-          "image h-[59px] w-[59px] rounded-full bg-gray-500 bg-cover bg-center bg-no-repeat",
+          "image h-[59px] w-[59px] rounded-full bg-[#D9D9D9] bg-cover bg-center bg-no-repeat",
           {
             "image-background": backgroundImage,
           },
@@ -23,7 +23,9 @@ export function UploadPicture() {
         }
       ></div>
       <div className="flex flex-col gap-1">
-        <Label>Upload Picture</Label>
+        <Label className="text-[16px] font-[400] text-[#0A0A0A]">
+          Upload Picture
+        </Label>
         <Label
           htmlFor="picture"
           className="cursor-pointer text-xs text-orange-500"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0869d646..73735a56 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,6 +14,7 @@ const config = {
       center: true,
       padding: "2rem",
       screens: {
+        "1sm": "368px",
         "2xl": "1400px",
       },
     },
@@ -117,6 +118,9 @@ const config = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      fontFamily: {
+        inter: ["Inter", "sans-serif"],
+      },
     },
   },
   /* eslint-disable-next-line unicorn/prefer-module */

From 2f026fd17ce163f5d09822cee2dc06afa0d58cec Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 21:06:46 +0100
Subject: [PATCH 05/15] merging and rebasing bran##ch

---
 app/components/addUserModel/addUserModal.tsx | 37 +++++++--
 app/context/modalContext.tsx                 | 33 ++++++++
 app/root.tsx                                 |  8 +-
 app/routes/_index.tsx                        | 83 ++++++++++++++++++++
 package.json                                 |  1 +
 pnpm-lock.yaml                               | 12 +++
 tailwind.config.ts                           | 10 +++
 7 files changed, 175 insertions(+), 9 deletions(-)
 create mode 100644 app/context/modalContext.tsx

diff --git a/app/components/addUserModel/addUserModal.tsx b/app/components/addUserModel/addUserModal.tsx
index a2ecaa5a..77c607a1 100644
--- a/app/components/addUserModel/addUserModal.tsx
+++ b/app/components/addUserModel/addUserModal.tsx
@@ -1,16 +1,37 @@
+import clsx from "clsx";
+import { XIcon } from "lucide-react";
+import { useModal } from "../../context/modalContext";
 import { InputForm } from "../ui/formComponents/formComponent";
 import { UploadPicture } from "../ui/formComponents/uploadPicture";
 
 const AddUserModal = () => {
+  const { isOpen, handleClose } = useModal();
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="h-[514px] w-[422px] rounded border bg-white p-[43px] max-[530px]:w-[90%]">
-        <h2 className="text-[18px] text-lg font-bold">Add new user</h2>
-        <p className="mb-4 mt-0 text-[12px]">Create New User</p>
-        <UploadPicture />
-        <InputForm />
-      </div>
-    </div>
+    <>
+      {isOpen && (
+        <div
+          className={clsx(
+            "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50",
+            { "animate-pop-in": isOpen, "animate-pop-out": !isOpen },
+          )}
+        >
+          <div className="relative h-[514px] w-[422px] rounded border bg-white p-[43px] max-[530px]:w-[90%]">
+            <button
+              onClick={handleClose}
+              className="absolute right-2 top-2 rounded-full bg-red-500 p-1 text-white"
+              aria-label="Close"
+            >
+              <XIcon />
+            </button>
+            <h2 className="text-[18px] text-lg font-bold">Add new user</h2>
+            <p className="mb-4 mt-0 text-[12px]">Create New User</p>
+            <UploadPicture />
+            <InputForm />
+          </div>
+        </div>
+      )}
+      ;
+    </>
   );
 };
 
diff --git a/app/context/modalContext.tsx b/app/context/modalContext.tsx
new file mode 100644
index 00000000..1ea2383c
--- /dev/null
+++ b/app/context/modalContext.tsx
@@ -0,0 +1,33 @@
+// app/context/ModalContext.tsx
+import { createContext, ReactNode, useContext, useState } from "react";
+
+interface ModalContextProperties {
+  isOpen: boolean;
+  handleOpen: () => void;
+  handleClose: () => void;
+}
+
+const ModalContext = createContext<ModalContextProperties | undefined>(
+  undefined,
+);
+
+export const ModalProvider = ({ children }: { children: ReactNode }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <ModalContext.Provider value={{ isOpen, handleOpen, handleClose }}>
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export const useModal = () => {
+  const context = useContext(ModalContext);
+  if (context === undefined) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return context;
+};
diff --git a/app/root.tsx b/app/root.tsx
index 05b40faf..b3b7e85e 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -10,6 +10,8 @@ import {
 import type { ReactNode } from "react";
 
 import FooterLight from "./components/ui/footerLight";
+import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
+import { ModalProvider } from "./context/modalContext";
 import styles from "./styles/global.css?url";
 
 export const links: LinksFunction = () => [
@@ -42,5 +44,9 @@ export function Layout({ children }: { children: ReactNode }) {
 }
 
 export default function App() {
-  return <Outlet />;
+  return (
+    <ModalProvider>
+      <Outlet />;
+    </ModalProvider>
+  );
 }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 9150fcad..5d311aa9 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -8,6 +8,7 @@ import CardPlatform from "~/components/ui/card/card-platform";
 import Footer from "~/components/ui/footer";
 import Header from "~/components/ui/header";
 import OtpAuth from "~/components/ui/otp/OtpAuth";
+import { useModal } from "~/context/modalContext";
 import { Input } from "~/types/otpauth";
 
 export const meta: MetaFunction = () => {
@@ -18,6 +19,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+<<<<<<< HEAD
   return (
     <div>
       <Header />
@@ -93,6 +95,87 @@ export default function Index() {
         />
         <AddUserModal />
       </div>
+=======
+  const [openModal, setOpenModal] = useState(false);
+  const { handleOpen } = useModal();
+  return (
+    <div className="p-4 font-sans">
+      <h1 className="text-3xl">Welcome to Remix</h1>
+      <ul className="mt-4 list-disc space-y-2 pl-6">
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/start/quickstart"
+            rel="noreferrer"
+          >
+            5m Quick Start
+          </a>
+        </li>
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/start/tutorial"
+            rel="noreferrer"
+          >
+            30m Tutorial
+          </a>
+        </li>
+        <Button>Hello</Button>
+        <div>
+          <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button>
+        </div>
+        <div className="p-2">
+          <CardPlatform
+            logo="/images/g-drive-icon.svg"
+            heading="Drive"
+            description="Store, share, and collaborate on documents and files securely"
+            containerClassName="max-w-[341px]"
+          />
+        </div>
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/docs"
+            rel="noreferrer"
+          >
+            Remix Docs
+          </a>
+        </li>
+        <li>
+          <Link
+            className="text-blue-700 underline visited:text-purple-900"
+            to="/magic-success"
+          >
+            Magic Link Login Success
+          </Link>
+        </li>
+      </ul>
+      <OtpAuth
+        isModalOpen={openModal}
+        setIsModalOpen={() => setOpenModal(!openModal)}
+        inputs={[
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+        ]}
+        handleSubmit={handleSubmit}
+      />
+      {/* ADDED THE MODAL HERE FOR TESTING USER PAGE NOT AVAILABLE, REMOVE AND ASSIGN TO THE PROPER PAGE */}
+      <AddUserModal />
+      {/* MODAL OPEN BUTTON< PLEASE REMOVE AND ASSIGN TO THE PROPER PAGE*/}
+      <button
+        onClick={handleOpen}
+        className="rounded bg-orange-500 px-4 py-2 text-white"
+      >
+        Add New User
+      </button>
+>>>>>>> 1cd6bbb (feat : Implemented the Add New User Modal)
     </div>
   );
 }
diff --git a/package.json b/package.json
index d560fb67..94707986 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "email:start": "email start"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.9.0",
     "@mertasan/tailwindcss-variables": "^2.7.0",
     "@radix-ui/react-accordion": "^1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3b3292a..a1fced3b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@heroicons/react':
+        specifier: ^2.1.5
+        version: 2.1.5(react@18.3.1)
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
@@ -798,6 +801,11 @@ packages:
   '@floating-ui/utils@0.2.4':
     resolution: {integrity: sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==}
 
+  '@heroicons/react@2.1.5':
+    resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==}
+    peerDependencies:
+      react: '>= 16'
+
   '@hookform/resolvers@3.9.0':
     resolution: {integrity: sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==}
     peerDependencies:
@@ -5781,6 +5789,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.4': {}
 
+  '@heroicons/react@2.1.5(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
   '@hookform/resolvers@3.9.0(react-hook-form@7.52.1(react@18.3.1))':
     dependencies:
       react-hook-form: 7.52.1(react@18.3.1)
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 73735a56..0055d22f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -113,10 +113,20 @@ const config = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        popIn: {
+          "0%": { transform: "scale(0.5)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" },
+        },
+        popOut: {
+          "0%": { transform: "scale(1)", opacity: "1" },
+          "100%": { transform: "scale(0.5)", opacity: "0" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "pop-in": "popIn 0.5s ease-out",
+        "pop-out": "popOut 0.5s ease-in",
       },
       fontFamily: {
         inter: ["Inter", "sans-serif"],

From ee4931bdc168c24754a9bfa31abed296407085d0 Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 21:08:10 +0100
Subject: [PATCH 06/15] feat : Implemented the Add New User Modal

---
 app/components/addUserModel/addUserModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/addUserModel/addUserModal.tsx b/app/components/addUserModel/addUserModal.tsx
index 77c607a1..d6693a20 100644
--- a/app/components/addUserModel/addUserModal.tsx
+++ b/app/components/addUserModel/addUserModal.tsx
@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { XIcon } from "lucide-react";
+
 import { useModal } from "../../context/modalContext";
 import { InputForm } from "../ui/formComponents/formComponent";
 import { UploadPicture } from "../ui/formComponents/uploadPicture";

From 02e086208db4edf59fc807e0266a4645e24f28ee Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 21:34:21 +0100
Subject: [PATCH 07/15] feat : Implemented the Add New User Modal

---
 app/components/ui/formComponents/formComponent.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
index 5e89c30c..a2547c60 100644
--- a/app/components/ui/formComponents/formComponent.tsx
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -62,7 +62,7 @@ export function InputForm() {
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="shadcn"
+                  placeholder="e.g Joh Doe"
                   {...field}
                   className={clsx(
                     `${styles.placeholderCustom} placeholderCustom`,
@@ -92,7 +92,7 @@ export function InputForm() {
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="shadcn"
+                  placeholder="e.g johndoe@gmail.com"
                   {...field}
                   className={clsx(
                     `${styles.placeholderCustom} placeholderCustom`,
@@ -122,7 +122,7 @@ export function InputForm() {
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="shadcn"
+                  placeholder="e.g 08123456789"
                   {...field}
                   className={clsx(
                     `${styles.placeholderCustom} placeholderCustom`,

From bb48d206156fd7e0a41111cd210961a00cb57713 Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 17:47:03 +0100
Subject: [PATCH 08/15] Remove folder from master branch

---
 app/components/ui/formComponents/formSchema.tsx   |  8 --------
 .../ui/formComponents/handleImageUpload.tsx       | 15 ---------------
 2 files changed, 23 deletions(-)
 delete mode 100644 app/components/ui/formComponents/formSchema.tsx
 delete mode 100644 app/components/ui/formComponents/handleImageUpload.tsx

diff --git a/app/components/ui/formComponents/formSchema.tsx b/app/components/ui/formComponents/formSchema.tsx
deleted file mode 100644
index dc4560d3..00000000
--- a/app/components/ui/formComponents/formSchema.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { z } from "zod";
-
-const phoneRegex = new RegExp(/^(\+?[\d\s]+)?(\d{3}|\(?\d+\))?(-?\s?\d)+$/);
-export const FormSchema = z.object({
-  name: z.string().min(2),
-  email: z.string().email(),
-  number: z.string().regex(phoneRegex, "Invalid Number!"),
-});
diff --git a/app/components/ui/formComponents/handleImageUpload.tsx b/app/components/ui/formComponents/handleImageUpload.tsx
deleted file mode 100644
index d77a316d..00000000
--- a/app/components/ui/formComponents/handleImageUpload.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ChangeEvent } from "react";
-
-export const handleImageUpload = (
-  event: ChangeEvent<HTMLInputElement>,
-  setBackgroundImage: (image: string | null) => void,
-) => {
-  const file = event.target.files?.[0];
-  if (file && file.type.startsWith("image/")) {
-    const reader = new FileReader();
-    reader.addEventListener("load", () => {
-      setBackgroundImage(reader.result as string);
-    });
-    reader.readAsDataURL(file);
-  }
-};

From 358a352cf2ccf661a2d1a4ca09f09c9e0961b8c1 Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Sun, 21 Jul 2024 23:40:41 +0100
Subject: [PATCH 09/15] feat : Implemented and merged Add User Model

---
 .../ui/formComponents/formComponent.tsx           |  6 +++---
 app/components/ui/formComponents/formSchema.tsx   |  8 ++++++++
 .../ui/formComponents/handleImageUpload.tsx       | 15 +++++++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 app/components/ui/formComponents/formSchema.tsx
 create mode 100644 app/components/ui/formComponents/handleImageUpload.tsx

diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
index a2547c60..5e89c30c 100644
--- a/app/components/ui/formComponents/formComponent.tsx
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -62,7 +62,7 @@ export function InputForm() {
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="e.g Joh Doe"
+                  placeholder="shadcn"
                   {...field}
                   className={clsx(
                     `${styles.placeholderCustom} placeholderCustom`,
@@ -92,7 +92,7 @@ export function InputForm() {
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="e.g johndoe@gmail.com"
+                  placeholder="shadcn"
                   {...field}
                   className={clsx(
                     `${styles.placeholderCustom} placeholderCustom`,
@@ -122,7 +122,7 @@ export function InputForm() {
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="e.g 08123456789"
+                  placeholder="shadcn"
                   {...field}
                   className={clsx(
                     `${styles.placeholderCustom} placeholderCustom`,
diff --git a/app/components/ui/formComponents/formSchema.tsx b/app/components/ui/formComponents/formSchema.tsx
new file mode 100644
index 00000000..dc4560d3
--- /dev/null
+++ b/app/components/ui/formComponents/formSchema.tsx
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+const phoneRegex = new RegExp(/^(\+?[\d\s]+)?(\d{3}|\(?\d+\))?(-?\s?\d)+$/);
+export const FormSchema = z.object({
+  name: z.string().min(2),
+  email: z.string().email(),
+  number: z.string().regex(phoneRegex, "Invalid Number!"),
+});
diff --git a/app/components/ui/formComponents/handleImageUpload.tsx b/app/components/ui/formComponents/handleImageUpload.tsx
new file mode 100644
index 00000000..d77a316d
--- /dev/null
+++ b/app/components/ui/formComponents/handleImageUpload.tsx
@@ -0,0 +1,15 @@
+import { ChangeEvent } from "react";
+
+export const handleImageUpload = (
+  event: ChangeEvent<HTMLInputElement>,
+  setBackgroundImage: (image: string | null) => void,
+) => {
+  const file = event.target.files?.[0];
+  if (file && file.type.startsWith("image/")) {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      setBackgroundImage(reader.result as string);
+    });
+    reader.readAsDataURL(file);
+  }
+};

From 624a5e27d38d3ac30d347e442146dfa82a3e8e87 Mon Sep 17 00:00:00 2001
From: emaicorp <emaicorp@gmail.com>
Date: Mon, 22 Jul 2024 00:43:47 +0100
Subject: [PATCH 10/15] feat: implemented Add User Modal

---
 .../ui/formComponents/form.module.css         |   2 +-
 .../ui/formComponents/formComponent.tsx       |  68 ++++--------
 .../ui/formComponents/formSubmit.tsx          |  19 ++--
 .../ui/formComponents/uploadPicture.tsx       |   4 +-
 app/root.tsx                                  |   6 +-
 app/routes/_index.tsx                         | 102 +++---------------
 tailwind.config.js                            |  10 ++
 7 files changed, 62 insertions(+), 149 deletions(-)

diff --git a/app/components/ui/formComponents/form.module.css b/app/components/ui/formComponents/form.module.css
index ad6dc3c7..84d97bf6 100644
--- a/app/components/ui/formComponents/form.module.css
+++ b/app/components/ui/formComponents/form.module.css
@@ -5,7 +5,7 @@
     line-height: 24px;
     text-align: left;
     color: #94A3B8;
-    
+    ;
   }
   
 
diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
index 5e89c30c..62e80211 100644
--- a/app/components/ui/formComponents/formComponent.tsx
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -51,25 +51,19 @@ export function InputForm() {
           render={({ field }) => (
             <FormItem>
               <FormLabel
-                className={clsx(
-                  "font-inter text-[14px] font-[500] text-[#0F172A]",
-                  {
-                    "text-red-500": form.formState.errors.name,
-                  },
-                )}
+                className={clsx({
+                  "text-red-500": form.formState.errors.name,
+                })}
               >
-                name
+                Name
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="shadcn"
+                  placeholder="e.g Joh Doe"
                   {...field}
-                  className={clsx(
-                    `${styles.placeholderCustom} placeholderCustom`,
-                    {
-                      "border-red-500": form.formState.errors.name,
-                    },
-                  )}
+                  className={clsx(`w-full ${styles.placholderCustom}`, {
+                    "border-red-500": form.formState.errors.name,
+                  })}
                 />
               </FormControl>
             </FormItem>
@@ -81,25 +75,19 @@ export function InputForm() {
           render={({ field }) => (
             <FormItem>
               <FormLabel
-                className={clsx(
-                  "font-inter text-[14px] font-[500] text-[#0F172A]",
-                  {
-                    "text-red-500": form.formState.errors.email,
-                  },
-                )}
+                className={clsx({
+                  "text-red-500": form.formState.errors.email,
+                })}
               >
                 Email
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="shadcn"
+                  placeholder="e.g johndoe@gmail.com"
                   {...field}
-                  className={clsx(
-                    `${styles.placeholderCustom} placeholderCustom`,
-                    {
-                      "border-red-500": form.formState.errors.email,
-                    },
-                  )}
+                  className={clsx(`w-full ${styles.placholderCustom}`, {
+                    "border-red-500": form.formState.errors.email,
+                  })}
                 />
               </FormControl>
             </FormItem>
@@ -111,35 +99,25 @@ export function InputForm() {
           render={({ field }) => (
             <FormItem>
               <FormLabel
-                className={clsx(
-                  "font-inter text-[14px] font-[500] text-[#0F172A]",
-                  {
-                    "text-red-500": form.formState.errors.number,
-                  },
-                )}
+                className={clsx({
+                  "text-red-500": form.formState.errors.number,
+                })}
               >
                 Phone Number
               </FormLabel>
               <FormControl>
                 <Input
-                  placeholder="shadcn"
+                  placeholder="e.g 08123456789"
                   {...field}
-                  className={clsx(
-                    `${styles.placeholderCustom} placeholderCustom`,
-                    {
-                      "border-red-500": form.formState.errors.number,
-                    },
-                  )}
+                  className={clsx(`w-full ${styles.placholderCustom}`, {
+                    "border-red-500": form.formState.errors.number,
+                  })}
                 />
               </FormControl>
             </FormItem>
           )}
         />
-        <div className="flex pt-2">
-          <Button type="submit" className="font-inter ml-auto">
-            Add New User
-          </Button>
-        </div>
+        <Button type="submit">Add New User</Button>
       </form>
     </Form>
   );
diff --git a/app/components/ui/formComponents/formSubmit.tsx b/app/components/ui/formComponents/formSubmit.tsx
index 17951458..f0017918 100644
--- a/app/components/ui/formComponents/formSubmit.tsx
+++ b/app/components/ui/formComponents/formSubmit.tsx
@@ -1,16 +1,17 @@
 import z from "zod";
 
-import { toast } from "~/components/ui/use-toast";
 import { FormSchema } from "./formSchema";
 
+// import { toast } from "./use-toast"
+
 export function submit(data: z.infer<typeof FormSchema>) {
   console.log("submited", data);
-  toast({
-    title: "You submitted the following values:",
-    description: (
-      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-        <code className="text-white">{JSON.stringify(data, undefined, 2)}</code>
-      </pre>
-    ),
-  });
+  // toast({
+  //   title: "You submitted the following values:",
+  //   description: (
+  //     <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+  //       <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+  //     </pre>
+  //   ),
+  // })
 }
diff --git a/app/components/ui/formComponents/uploadPicture.tsx b/app/components/ui/formComponents/uploadPicture.tsx
index 0c925013..fd551e28 100644
--- a/app/components/ui/formComponents/uploadPicture.tsx
+++ b/app/components/ui/formComponents/uploadPicture.tsx
@@ -23,9 +23,7 @@ export function UploadPicture() {
         }
       ></div>
       <div className="flex flex-col gap-1">
-        <Label className="text-[16px] font-[400] text-[#0A0A0A]">
-          Upload Picture
-        </Label>
+        <Label>Upload Picture</Label>
         <Label
           htmlFor="picture"
           className="cursor-pointer text-xs text-orange-500"
diff --git a/app/root.tsx b/app/root.tsx
index b3b7e85e..3f15edf3 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -9,8 +9,8 @@ import {
 } from "@remix-run/react";
 import type { ReactNode } from "react";
 
-import FooterLight from "./components/ui/footerLight";
-import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
+// import FooterLight from "./components/ui/footerLight";
+// import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
 import { ModalProvider } from "./context/modalContext";
 import styles from "./styles/global.css?url";
 
@@ -32,7 +32,7 @@ export function Layout({ children }: { children: ReactNode }) {
         <div className="flex">
           <main className="flex-1">
             {children}
-            <FooterLight />
+            {/* <FooterLight /> */}
           </main>
           ,
           <ScrollRestoration />
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 5d311aa9..9649a1a1 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,15 +1,19 @@
 import type { MetaFunction } from "@remix-run/node";
+import { Link } from "@remix-run/react";
+
+// import { useState } from "react";
 
 import AddUserModal from "~/components/addUserModel/addUserModal";
-import BlogPost from "~/components/BlogPost";
-import HeroSection from "~/components/HeroSection";
+// import BlogPost from "~/components/BlogPost";
+// import HeroSection from "~/components/HeroSection";
 import { Button } from "~/components/ui/button";
 import CardPlatform from "~/components/ui/card/card-platform";
-import Footer from "~/components/ui/footer";
-import Header from "~/components/ui/header";
-import OtpAuth from "~/components/ui/otp/OtpAuth";
+// import Footer from "~/components/ui/footer";
+// import Header from "~/components/ui/header";
+// import OtpAuth from "~/components/ui/otp/OtpAuth";
 import { useModal } from "~/context/modalContext";
-import { Input } from "~/types/otpauth";
+
+// import { Input } from "~/types/otpauth";
 
 export const meta: MetaFunction = () => {
   return [
@@ -19,84 +23,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
-<<<<<<< HEAD
-  return (
-    <div>
-      <Header />
-      <HeroSection />
-      <BlogPost />
-      <Footer />
-      <div className="p-4 font-sans">
-        <h1 className="text-3xl">Welcome to Remix</h1>
-        <ul className="mt-4 list-disc space-y-2 pl-6">
-          <li>
-            <a
-              className="text-blue-700 underline visited:text-purple-900"
-              target="_blank"
-              href="https://remix.run/start/quickstart"
-              rel="noreferrer"
-            >
-              5m Quick Start
-            </a>
-          </li>
-          <li>
-            <a
-              className="text-blue-700 underline visited:text-purple-900"
-              target="_blank"
-              href="https://remix.run/start/tutorial"
-              rel="noreferrer"
-            >
-              30m Tutorial
-            </a>
-          </li>
-          <Button>Hello</Button>
-          <div>
-            <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button>
-          </div>
-          <div className="p-2">
-            <CardPlatform
-              logo="/images/g-drive-icon.svg"
-              heading="Drive"
-              description="Store, share, and collaborate on documents and files securely"
-              containerClassName="max-w-[341px]"
-            />
-          </div>
-          <li>
-            <a
-              className="text-blue-700 underline visited:text-purple-900"
-              target="_blank"
-              href="https://remix.run/docs"
-              rel="noreferrer"
-            >
-              Remix Docs
-            </a>
-          </li>
-          <li>
-            <Link
-              className="text-blue-700 underline visited:text-purple-900"
-              to="/magic-success"
-            >
-              Magic Link Login Success
-            </Link>
-          </li>
-        </ul>
-        <OtpAuth
-          isModalOpen={openModal}
-          setIsModalOpen={() => setOpenModal(!openModal)}
-          inputs={[
-            { name: "input1", value: "" },
-            { name: "input1", value: "" },
-            { name: "input1", value: "" },
-            { name: "input1", value: "" },
-            { name: "input1", value: "" },
-            { name: "input1", value: "" },
-          ]}
-          handleSubmit={handleSubmit}
-        />
-        <AddUserModal />
-      </div>
-=======
-  const [openModal, setOpenModal] = useState(false);
+  // const [openModal, setOpenModal] = useState(false);
   const { handleOpen } = useModal();
   return (
     <div className="p-4 font-sans">
@@ -124,7 +51,7 @@ export default function Index() {
         </li>
         <Button>Hello</Button>
         <div>
-          <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button>
+          {/* <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button> */}
         </div>
         <div className="p-2">
           <CardPlatform
@@ -153,7 +80,7 @@ export default function Index() {
           </Link>
         </li>
       </ul>
-      <OtpAuth
+      {/* <OtpAuth
         isModalOpen={openModal}
         setIsModalOpen={() => setOpenModal(!openModal)}
         inputs={[
@@ -165,7 +92,7 @@ export default function Index() {
           { name: "input1", value: "" },
         ]}
         handleSubmit={handleSubmit}
-      />
+      /> */}
       {/* ADDED THE MODAL HERE FOR TESTING USER PAGE NOT AVAILABLE, REMOVE AND ASSIGN TO THE PROPER PAGE */}
       <AddUserModal />
       {/* MODAL OPEN BUTTON< PLEASE REMOVE AND ASSIGN TO THE PROPER PAGE*/}
@@ -175,7 +102,6 @@ export default function Index() {
       >
         Add New User
       </button>
->>>>>>> 1cd6bbb (feat : Implemented the Add New User Modal)
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index b5d4208e..3c83bc78 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -71,10 +71,20 @@ const tailwindConfig = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        popIn: {
+          "0%": { transform: "scale(0.5)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" },
+        },
+        popOut: {
+          "0%": { transform: "scale(1)", opacity: "1" },
+          "100%": { transform: "scale(0.5)", opacity: "0" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "pop-in": "popIn 0.5s ease-out",
+        "pop-out": "popOut 0.5s ease-in",
       },
     },
   },

From 668c3e991ac8b556dd02ad12a698954d949b7eef Mon Sep 17 00:00:00 2001
From: emaicorp <64812109+emaicorp@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:21:09 +0100
Subject: [PATCH 11/15] Update root.tsx

---
 app/root.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/root.tsx b/app/root.tsx
index 3f15edf3..60255c30 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -9,8 +9,8 @@ import {
 } from "@remix-run/react";
 import type { ReactNode } from "react";
 
-// import FooterLight from "./components/ui/footerLight";
-// import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
+ import FooterLight from "./components/ui/footerLight";
+import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
 import { ModalProvider } from "./context/modalContext";
 import styles from "./styles/global.css?url";
 

From 87ac81362e8b1dba0d287a26b79bfdc504117e87 Mon Sep 17 00:00:00 2001
From: emaicorp <64812109+emaicorp@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:22:53 +0100
Subject: [PATCH 12/15] Update formSubmit.tsx

---
 .../ui/formComponents/formSubmit.tsx          | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/components/ui/formComponents/formSubmit.tsx b/app/components/ui/formComponents/formSubmit.tsx
index f0017918..c0bbf843 100644
--- a/app/components/ui/formComponents/formSubmit.tsx
+++ b/app/components/ui/formComponents/formSubmit.tsx
@@ -2,16 +2,15 @@ import z from "zod";
 
 import { FormSchema } from "./formSchema";
 
-// import { toast } from "./use-toast"
+import { toast } from "./use-toast"
 
 export function submit(data: z.infer<typeof FormSchema>) {
-  console.log("submited", data);
-  // toast({
-  //   title: "You submitted the following values:",
-  //   description: (
-  //     <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-  //       <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-  //     </pre>
-  //   ),
-  // })
+   toast({
+    title: "You submitted the following values:",
+    description: (
+      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+        <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+      </pre>
+    ),
+  })
 }

From 3bc420f28463466e058ea9f558e97e1a637bd4fb Mon Sep 17 00:00:00 2001
From: emaicorp <64812109+emaicorp@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:26:47 +0100
Subject: [PATCH 13/15] Update _index.tsx

---
 app/routes/_index.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 9649a1a1..029eb39d 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,19 +1,19 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 
-// import { useState } from "react";
+import { useState } from "react";
 
 import AddUserModal from "~/components/addUserModel/addUserModal";
-// import BlogPost from "~/components/BlogPost";
-// import HeroSection from "~/components/HeroSection";
+import BlogPost from "~/components/BlogPost";
+import HeroSection from "~/components/HeroSection";
 import { Button } from "~/components/ui/button";
 import CardPlatform from "~/components/ui/card/card-platform";
-// import Footer from "~/components/ui/footer";
-// import Header from "~/components/ui/header";
-// import OtpAuth from "~/components/ui/otp/OtpAuth";
+import Footer from "~/components/ui/footer";
+import Header from "~/components/ui/header";
+import OtpAuth from "~/components/ui/otp/OtpAuth";
 import { useModal } from "~/context/modalContext";
 
-// import { Input } from "~/types/otpauth";
+import { Input } from "~/types/otpauth";
 
 export const meta: MetaFunction = () => {
   return [
@@ -23,7 +23,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
-  // const [openModal, setOpenModal] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
   const { handleOpen } = useModal();
   return (
     <div className="p-4 font-sans">
@@ -51,7 +51,7 @@ export default function Index() {
         </li>
         <Button>Hello</Button>
         <div>
-          {/* <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button> */}
+          <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button>
         </div>
         <div className="p-2">
           <CardPlatform
@@ -80,7 +80,7 @@ export default function Index() {
           </Link>
         </li>
       </ul>
-      {/* <OtpAuth
+      <OtpAuth
         isModalOpen={openModal}
         setIsModalOpen={() => setOpenModal(!openModal)}
         inputs={[
@@ -92,7 +92,7 @@ export default function Index() {
           { name: "input1", value: "" },
         ]}
         handleSubmit={handleSubmit}
-      /> */}
+      />
       {/* ADDED THE MODAL HERE FOR TESTING USER PAGE NOT AVAILABLE, REMOVE AND ASSIGN TO THE PROPER PAGE */}
       <AddUserModal />
       {/* MODAL OPEN BUTTON< PLEASE REMOVE AND ASSIGN TO THE PROPER PAGE*/}

From b42e7d5c5081a88b13c73e004ec17ea66276ad21 Mon Sep 17 00:00:00 2001
From: emaicorp <64812109+emaicorp@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:33:08 +0100
Subject: [PATCH 14/15] Update package.json

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 81badcd9..41420480 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "email:start": "email start"
   },
   "dependencies": {
-    "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.9.0",
     "@mertasan/tailwindcss-variables": "^2.7.0",
     "@radix-ui/react-accordion": "^1.2.0",

From e548dc24bab5575d2cc6e1b33f70ba0732e8a95f Mon Sep 17 00:00:00 2001
From: emaicorp <64812109+emaicorp@users.noreply.github.com>
Date: Tue, 23 Jul 2024 08:32:55 +0100
Subject: [PATCH 15/15] Update formComponent.tsx

---
 app/components/ui/formComponents/formComponent.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
index 62e80211..27850cba 100644
--- a/app/components/ui/formComponents/formComponent.tsx
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -117,7 +117,9 @@ export function InputForm() {
             </FormItem>
           )}
         />
-        <Button type="submit">Add New User</Button>
+        <div className="flex pt-3">
+          <Button type="submit" className="ml-auto" >Add New User</Button>
+        </div>
       </form>
     </Form>
   );