Feat/hng 55 super admin add user modal components

app/components/addUserModel/addUserModal.tsx

@@ -0,0 +1,39 @@
+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 (
+    <>
+      {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>
+      )}
+      ;
+    </>
+  );
+};
+
+export default AddUserModal;

app/components/ui/form.tsx

@@ -1,57 +1,64 @@
+
 "use client";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import { Label } from "app/components/ui/label";
 import { cn } from "app/lib/utils/cn";
 import * as React from "react";
+
 import {
   Controller,
   ControllerProps,
   FieldPath,
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form";
 
-const Form = FormProvider;
+} 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>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-  name: TName;
-};
+  name: TName
+}
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
+  {} as FormFieldContextValue
+)
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
-  ...properties
+  ...props
 }: ControllerProps<TFieldValues, TName>) => {
   return (
-    <FormFieldContext.Provider value={{ name: properties.name }}>
-      <Controller {...properties} />
+    <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 fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
 
-  const fieldState = getFieldState(fieldContext.name, formState);
+  const fieldState = getFieldState(fieldContext.name, formState)
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
+    throw new Error("useFormField should be used within <FormField>")
   }
 
-  const { id } = itemContext;
+  const { id } = itemContext
+
 
   return {
     id,
@@ -60,113 +67,124 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  };
-};
+
+  }
+}
 
 type FormItemContextValue = {
-  id: string;
-};
+  id: string
+}
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
+  {} as FormItemContextValue
+)
+
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...properties }, reference) => {
-  const id = React.useId();
+
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div
-        ref={reference}
-        className={cn("space-y-2", className)}
-        {...properties}
-      />
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = "FormItem";
+  )
+})
+FormItem.displayName = "FormItem"
+
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...properties }, reference) => {
-  const { error, formItemId } = useFormField();
+
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
 
   return (
     <Label
-      ref={reference}
+      ref={ref}
       className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
-      {...properties}
+      {...props}
     />
-  );
-});
-FormLabel.displayName = "FormLabel";
+  )
+})
+FormLabel.displayName = "FormLabel"
+
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...properties }, reference) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
   return (
     <Slot
-      ref={reference}
+      ref={ref}
       id={formItemId}
       aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
-      {...properties}
+      {...props}
     />
-  );
-});
-FormControl.displayName = "FormControl";
+  )
+})
+FormControl.displayName = "FormControl"
+
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...properties }, reference) => {
-  const { formDescriptionId } = useFormField();
+
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
 
   return (
     <p
-      ref={reference}
+      ref={ref}
       id={formDescriptionId}
       className={cn("text-sm text-muted-foreground", className)}
-      {...properties}
+      {...props}
     />
-  );
-});
-FormDescription.displayName = "FormDescription";
+  )
+})
+FormDescription.displayName = "FormDescription"
+
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...properties }, reference) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
 
   if (!body) {
-    return;
+    return null
+
   }
 
   return (
     <p
-      ref={reference}
+
+      ref={ref}
       id={formMessageId}
       className={cn("text-sm font-medium text-destructive", className)}
-      {...properties}
+      {...props}
     >
       {body}
     </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
+  )
+})
+FormMessage.displayName = "FormMessage"
+
 
 export {
   useFormField,
@@ -177,4 +195,6 @@ export {
   FormDescription,
   FormMessage,
   FormField,
+
 };
+

app/components/ui/formComponents/form.module.css

@@ -0,0 +1,12 @@
+/* InputForm.module.css */
+.placeholderCustom::placeholder {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    color: #94A3B8;
+    ;
+  }
+
+
+