module.exports = {
  content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primaryColor: '#E17446',
        primaryColorHover: '#db5b24',
        primaryText: '#111130',
        primaryBlue: '#2b5a9c',
        textLight: '#9e9ebc',
        Gray: '#8f9bad',
        f6f9fd: '#f6f9fd',
        dddddd: '#dddddd',
        inputborder: '#e8e8e8',
        borderColor: '#ebebeb',
        green: '#008f02',
        lightGreen: '#e2f2e2',
        orange: '#f05c00',
        orangeLight: '#fcede4',
        redLight: '#fde5e5',
        red: '#f00000',
        border1: '#ebebeb',

        themecolor: '#E17446',
        hoverthemecolor: '#db5b24',
      },
      backgroundImage: {
        close: 'url(/public/images/colse.png)',
        trendBG1: 'url(../../public/images/blog-img.jpg)',
      },
      boxShadow: {
        inputFocus:
          'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px',
        headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px',
        sibarToggle: '-4px 5px 5px #0000000d',
        sibarToggleRTL: '5px -4px 6px #0000000d',
      },
      spacing: {
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '18px': '18px',
        '20px': '20px',
        '25px': '25px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        '106px': '106px',
        '120px': '120px',
        unset: 'unset',
      },
      fontFamily: {
        charter: 'var(--charterFont)',
        sohne: 'var(--sohneFont)',
        poppins: 'var(--poppins)',
        gloock: 'var(--gloock)',
      },
      fontSize: {
        0: '0',
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '16px': '16px',
        '17px': '17px',
        '20px': '20px',
        '22px': '22px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
      },
      lineHeight: {
        1: '1',
        '5px': '5px',
        '10x': '10px',
        '15px': '15px',
        '19px': '19px',
        '22px': '22px',
        '20px': '20px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '32px': '32px',
        '35px': '35px',
        '36px': '36px',
        '40px': '40px',
        '42px': '42px',
        '46px': '46px',
        '45px': '45px',
        '50px': '50px',
        '52px': '52px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
        Normal: 'normal',
      },
      zIndex: {
        1: '9',
        2: '99',
        3: '999',
        4: '9999',
        5: '99999',
        6: '999999',
      },
      borderRadius: {
        '5px': '5px',
        '10px': '10px',
        '15px': '15px',
      },
      screens: {
        768: '768px',
        992: '992px',
        1200: '1200px',
        1300: '1300px',
        1400: '1400px',
        1500: '1500px',
        1600: '1600px',
        1700: '1700px',
      },
      animation: {
        slow: 'wiggle 2s linear',
      },
      keyframes: {
        wiggle: {
          '0%': { transform: 'transform(164.25px)' },
          '100%': { transform: 'rotate(0px)' },
        },
      },
    },
  },
}

module.exports = {
  content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primaryColor: '#E17446',
        primaryColorHover: '#db5b24',
        primaryText: '#111130',
        primaryBlue: '#2b5a9c',
        textLight: '#9e9ebc',
        Gray: '#8f9bad',
        f6f9fd: '#f6f9fd',
        dddddd: '#dddddd',
        inputborder: '#e8e8e8',
        borderColor: '#ebebeb',
        green: '#008f02',
        lightGreen: '#e2f2e2',
        orange: '#f05c00',
        orangeLight: '#fcede4',
        redLight: '#fde5e5',
        red: '#f00000',
        border1: '#ebebeb',

        themecolor: '#E17446',
        hoverthemecolor: '#db5b24',
      },
      backgroundImage: {
        close: 'url(/public/images/colse.png)',
        trendBG1: 'url(../../public/images/blog-img.jpg)',
      },
      boxShadow: {
        inputFocus:
          'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px',
        headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px',
        sibarToggle: '-4px 5px 5px #0000000d',
        sibarToggleRTL: '5px -4px 6px #0000000d',
      },
      spacing: {
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '18px': '18px',
        '20px': '20px',
        '25px': '25px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        '106px': '106px',
        '120px': '120px',
        unset: 'unset',
      },
      fontFamily: {
        charter: 'var(--charterFont)',
        sohne: 'var(--sohneFont)',
        poppins: 'var(--poppins)',
        gloock: 'var(--gloock)',
      },
      fontSize: {
        0: '0',
        '5px': '5px',
        '10px': '10px',
        '14px': '14px',
        '15px': '15px',
        '16px': '16px',
        '17px': '17px',
        '20px': '20px',
        '22px': '22px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '35px': '35px',
        '40px': '40px',
        '45px': '45px',
        '50px': '50px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
      },
      lineHeight: {
        1: '1',
        '5px': '5px',
        '10x': '10px',
        '15px': '15px',
        '19px': '19px',
        '22px': '22px',
        '20px': '20px',
        '25px': '25px',
        '28px': '28px',
        '30px': '30px',
        '32px': '32px',
        '35px': '35px',
        '36px': '36px',
        '40px': '40px',
        '42px': '42px',
        '46px': '46px',
        '45px': '45px',
        '50px': '50px',
        '52px': '52px',
        '55px': '55px',
        '60px': '60px',
        '65px': '65px',
        '70px': '70px',
        '75px': '75px',
        '80px': '80px',
        '85px': '85px',
        '90px': '90px',
        '95px': '95px',
        '100px': '100px',
        unset: 'unset',
        Normal: 'normal',
      },
      zIndex: {
        1: '9',
        2: '99',
        3: '999',
        4: '9999',
        5: '99999',
        6: '999999',
      },
      borderRadius: {
        '5px': '5px',
        '10px': '10px',
        '15px': '15px',
      },
      screens: {
        768: '768px',
        992: '992px',
        1200: '1200px',
        1300: '1300px',
        1400: '1400px',
        1500: '1500px',
        1600: '1600px',
        1700: '1700px',
      },
      animation: {
        slow: 'wiggle 2s linear',
      },
      keyframes: {
        wiggle: {
          '0%': { transform: 'transform(164.25px)' },
          '100%': { transform: 'rotate(0px)' },
        },
      },
    },
  },
}

<div class=" w-full h-screen p-4">

    <div class="h-14 w-full bg-slate-100 rounded-md font-semibold text-gray-800 flex items-center text-center px-2 transition-colors">
        <div class=" basis-1/3 rounded-md bg-white py-2 shadow-sm">New Items</div>
        <div class=" basis-1/3 rounded-md ">Return Items</div>
        <div class=" basis-1/3 rounded-md ">Issue Items</div>
    </div>

</div>

<html>

<body>
    <div class="dark relative min-h-screen transition-all ease-out" id="parent">
        <label for="check" class="mx-auto mt-4 block w-fit border px-4 py-2">
            <span>dark</span>
            <input type="checkbox" class="hidden" id="check" onclick="document.getElementById('parent').classList.toggle('dark')" />
        </label>
        <div class="absolute left-1/2 top-1/2 mx-auto max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-4 shadow-xl">
            <h1 class="mb-2 border-b-2 border-indigo-400 pb-1 text-center text-xl">Lorem ipsum dolor sit amet.</h1>
            <div>
                <p class="text-emerald-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, illum rem.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam molestias laborum odio.</p>
            </div>
        </div>
    </div>
</body>

</html>

<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>

<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>

<div>
    <div class="sticky top-0 flex h-12 w-full items-center bg-black">
        <input type="checkbox" class="peer hidden" id="a" />
        <label for="a" class="select-none border px-4 py-2 text-white"> ☰ </label>

        <!-- Sidebar -->
        <div class="fixed inset-y-0 left-0 mt-12 w-64 -translate-x-full transform bg-gray-800 px-4 transition-transform duration-300 ease-in-out peer-checked:translate-x-0">
            <div class="flex h-full flex-col justify-between gap-4">
                <div class="border border-emerald-500">
                    <h1 class="text-2xl leading-loose text-white">Logo</h1>
                </div>
                <div class="overflow-y-auto border border-orange-500">
                    <!-- Links -->
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 1</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 2</a>
                    <div class="group">
                        <div class="relative">
                            <a href="#" class="group block py-2 text-white hover:bg-gray-700">
                                Link 3
                                <span class="absolute right-4 top-1/2 -translate-y-1/2 transform text-white transition-transform group-hover:rotate-180">▼</span>
                            </a>
                        </div>
                        <div class="mt-2 hidden space-y-2 pl-4 group-hover:flex group-hover:flex-col">
                            <a href="#" class="text-white">Link 3.1</a>
                            <a href="#" class="text-white">Link 3.2</a>
                        </div>
                    </div>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                </div>
                <!-- Settings -->
                <div class="border border-lime-500"><button class="block py-2 text-white hover:bg-gray-700">Settings</button></div>
            </div>
        </div>
    </div>
    <!-- Main Content -->
    <div class="flex-grow bg-gray-100 p-4">
        <!-- Your Main Content Goes Here -->
        <p>....</p>
    </div>
</div>

// src/components/RadixSlider.jsx
import * as Slider from "@radix-ui/react-slider";
import { useState } from "react";

const RadixSlider = () => {
  const [values, setValues] = useState([20, 80]);
  console.log(values);
  return (
    <div className="bg-gray-200 ">
      <label
        htmlFor="slider"
        className="text-center text-sm font-medium text-gray-700"
      >
        range: {values.toString()}
      </label>
      <Slider.Root
        id="slider"
        className="outline outline-1 mx-auto relative flex items-center select-none touch-none w-[300px] h-5"
        defaultValue={values}
        // onValueChange={(values) => setValues(values)}
        onValueCommit={(values) => setValues(values)}
        max={100}
        step={1}
        minStepsBetweenThumbs={10}
      >
        <Slider.Track className="bg-blue-400 relative grow rounded-full h-[3px]">
          <Slider.Range className="absolute bg-red-400 rounded-full h-full" />
        </Slider.Track>
        <Slider.Thumb
          className="block bg-white shadow-[0_2px_10px] shadow-black rounded-full hover:bg-violet-300 focus:outline "
          aria-label="Volume"
          asChild
        >
          <p className=" px-1"> {values[0]}</p>
        </Slider.Thumb>
        <Slider.Thumb
          className="block   bg-white shadow-[0_2px_10px] shadow-black rounded-full hover:bg-violet-300 focus:outline "
          aria-label="Volume"
          asChild
        >
          <p className=" px-1"> {values[1]}</p>
        </Slider.Thumb>
      </Slider.Root>
    </div>
  );
};

export default RadixSlider;

// src/App.jsx
const App = () => (
  <div>

      <RadixSlider />
     
    </div>
  </div>
);

import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

const signUpSchema = z
  .object({
    email: z
      .string()
      .nonempty("email is required")
      .email("Invalid email address"),
    password: z.string().min(8, "Password must be at least 8 characters"),
    confirmPassword: z.string(),
  })
  // we can use zod to validate using refine method
  .refine((data) => data.password === data.confirmPassword, {
    message: "Passwords do not match",
    path: ["confirmPassword"], // it will show error in confirmPassword field
  });

type ISignUpSchema = z.infer<typeof signUpSchema>; // create type from schema

const ReactHookFormWithZod = () => {
  const [show, setShow] = useState(false);
  const [show1, setShow1] = useState(false);
  const { register, handleSubmit, formState, reset } = useForm<ISignUpSchema>({
    resolver: zodResolver(signUpSchema), //tell which schema to resolve
  });
  const { errors, isSubmitting } = formState;

  const onSubmit = async (data: ISignUpSchema) => {
    console.log(data);
    //-------send data to server----------//
    await new Promise((resolve) => setTimeout(resolve, 1000));
    //------
    reset(); // clear form
  };
  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="flex flex-col gap-y-4 [&>div>input]:w-full"
    >
      <label className="-mb-3 text-sm text-gray-500" htmlFor="email">
        email
      </label>
      <div className="">
        <input
          {...register("email")}
          type="text"
          placeholder="email"
          className="rounded border px-4 py-2"
        />
        {
          // granular show errors
          errors.email && (
            <p className="text-sm text-red-500">{`${errors.email.message}`}</p>
          )
        }
      </div>
      <label className="-mb-3 text-sm text-gray-500" htmlFor="password">
        password
      </label>
      <div className="relative ">
        <input
          {...register("password")}
          type={show ? "text" : "password"}
          id="password"
          placeholder="password"
          className=" block rounded border py-2 pl-2 pr-12"
        ></input>
        <p
          className="absolute  right-2 top-0 block cursor-pointer select-none py-2 "
          onClick={() => setShow((show) => !show)}
        >
          👁️
        </p>
        {
          // granular show errors
          errors.password && (
            <p className="text-sm text-red-500">{`${errors.password.message}`}</p>
          )
        }
      </div>
      <label className="-mb-3 text-sm text-gray-500" htmlFor="confirmPassword ">
        confirm password
      </label>
      <div className="relative">
        <input
          {...register("confirmPassword")}
          id="confirmPassword"
          type={show1 ? "text" : "password"}
          placeholder="confirm password"
          className="rounded border py-2 pl-2 pr-10 "
        />
        <p
          className="absolute  right-2 top-0 block cursor-pointer select-none py-2 "
          onClick={() => setShow1((show) => !show)}
        >
          👁️
        </p>
        {
          // granular show errors
          errors.confirmPassword && (
            <p className="text-sm text-red-500">{`${errors.confirmPassword.message}`}</p>
          )
        }
      </div>

      <button
        type="submit"
        className="rounded bg-blue-500 py-2 text-white disabled:cursor-no-drop disabled:bg-gray-500"
        disabled={isSubmitting}
      >
        {isSubmitting ? "loading..." : "Submit"}
      </button>
    </form>
  );
};

export default ReactHookFormWithZod;

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import type { FieldValues } from "react-hook-form";

const ReactHookForm = () => {
  const [show, setShow] = useState(false);
  const [show1, setShow1] = useState(false);
  const { register, handleSubmit, formState, reset, getValues } = useForm();
  const { errors, isSubmitting } = formState;

  const onSubmit = async (data: FieldValues) => {
    // (data:FieldValues) type is -> {[x:string] : any} //we would need zod for more typesafety
    console.log(data);
    //-------send data to server----------//
    await new Promise((resolve) => setTimeout(resolve, 1000));
    //------
    reset(); // clear form
  };
  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="flex flex-col gap-y-4 [&>div>input]:w-full"
    >
      <label className="-mb-3 text-sm text-gray-500" htmlFor="email">
        email
      </label>
      <div className="border">
        <input
          {...register("email", {
            required: "Email is required",
            pattern: {
              value: /\S+@\S+\.\S+/,
              message: "invaid email format",
            },
          })}
          type="email"
          placeholder="email"
          className="rounded px-4 py-2"
        />
        {
          // granular show errors
          errors.email && (
            <p className="text-sm text-red-500">{`${errors.email.message}`}</p>
          )
        }
      </div>
      <label className="-mb-3 text-sm text-gray-500" htmlFor="password">
        password
      </label>
      <div className="relative border ">
        <input
          {...register("password", {
            required: "Password is required",
            minLength: {
              value: 8,
              message: "Password must be at least 8 characters",
            },
          })}
          type={show ? "text" : "password"}
          id="password"
          placeholder="password"
          className="  block rounded py-2 pl-2 pr-12"
        ></input>
        <p
          className="absolute  right-2 top-0 block cursor-pointer select-none py-2 "
          onClick={() => setShow((show) => !show)}
        >
          👁️
        </p>
        {
          // granular show errors
          errors.password && (
            <p className="text-sm text-red-500">{`${errors.password.message}`}</p>
          )
        }
      </div>
      <label className="-mb-3 text-sm text-gray-500" htmlFor="confirmPassword ">
        confirm password
      </label>
      <div className="relative border">
        <input
          {...register("confirmPassword", {
            required: "Confirm Password is required",
            validate: (value) => {
              return (
                // getValues from "password" input
                value === getValues("password") || "Passwords do not match"
              );
            },
          })}
          id="confirmPassword"
          type={show1 ? "text" : "password"}
          placeholder="confirm password"
          className="rounded py-2 pl-2 pr-10 "
        />
        <p
          className="absolute  right-2 top-0 block cursor-pointer select-none py-2 "
          onClick={() => setShow1((show) => !show)}
        >
          👁️
        </p>
        {
          // granular show errors
          errors.confirmPassword && (
            <p className="text-sm text-red-500">{`${errors.confirmPassword.message}`}</p>
          )
        }
      </div>

      <button
        type="submit"
        className="rounded bg-blue-500 py-2 text-white disabled:cursor-no-drop disabled:bg-gray-500"
        disabled={isSubmitting}
      >
        {isSubmitting ? "loading..." : "Submit"}
      </button>
    </form>
  );
};

export default ReactHookForm;

import { useState } from "react";

const initialFormData = {
  email: "",
  password: "",
  confirmPassword: "",
};
const FormWithoutReactHookForm = () => {
  const [show, setShow] = useState(false);
  const [show1, setShow1] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errors, setErrors] = useState<string[]>([""]); // errors are array of strings
  const [formData, setFormData] = useState(initialFormData);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrors([]); // clear errors
    //-------validate data ----------//
    if (formData.password !== formData.confirmPassword) {
      setErrors((prev) => [...prev, "passwords do not match"]);
      return;
    }

    console.log(formData);
    setIsSubmitting(true); // show loading or disable submit button
    //-------send data to Server ----------//
    await new Promise((resolve) => setTimeout(resolve, 1000));
    //....
    setFormData(initialFormData); // clear form
    setIsSubmitting(false);
  };
  return (
    <form
      className="flex flex-col gap-y-4 [&>div>input]:w-full"
      onSubmit={handleSubmit}
    >
      <label className="-mb-3 text-sm text-gray-500" htmlFor="email">
        email
      </label>
      <div className="border">
        <input
          type="email"
          id="email"
          required={true}
          placeholder="email"
          className="rounded px-4 py-2"
          value={formData.email}
          onChange={(e) =>
            setFormData((prev) => ({ ...prev, email: e.target.value }))
          }
        />
      </div>
      <label className="-mb-3 text-sm text-gray-500" htmlFor="password">
        password
      </label>
      <div className="relative border ">
        <input
          type={show ? "text" : "password"}
          id="password"
          placeholder="password"
          className="  block rounded py-2 pl-2 pr-12"
          required={true}
          minLength={8}
          value={formData.password}
          onChange={(e) =>
            setFormData((prev) => ({ ...prev, password: e.target.value }))
          }
        ></input>
        <p
          className="absolute  right-2 top-0 block cursor-pointer select-none py-2 "
          onClick={() => setShow((show) => !show)}
        >
          👁️
        </p>
      </div>
      <label className="-mb-3 text-sm text-gray-500" htmlFor="confirmPassword ">
        confirm password
      </label>
      <div className="relative border">
        <input
          id="confirmPassword"
          required={true}
          type={show1 ? "text" : "password"}
          placeholder="confirm password"
          className="rounded py-2 pl-2 pr-10 "
          value={formData.confirmPassword}
          onChange={(e) =>
            setFormData((prev) => ({
              ...prev,
              confirmPassword: e.target.value,
            }))
          }
        />
        <p
          className="absolute  right-2 top-0 block cursor-pointer select-none py-2 "
          onClick={() => setShow1((show) => !show)}
        >
          👁️
        </p>
      </div>
      {
        // show errors
        errors.length > 0 && (
          <div className=" text-center text-red-500">
            {errors.map((error, i) => (
              <p key={i} className="text-sm">
                {error}
              </p>
            ))}
          </div>
        )
      }
      <button
        type="submit"
        className="rounded bg-blue-500 py-2 text-white disabled:cursor-no-drop disabled:bg-gray-500"
        disabled={isSubmitting}
      >
        {isSubmitting ? "loading..." : "Submit"}
      </button>
    </form>
  );
};

export default FormWithoutReactHookForm;

import { useRef, useState } from "react";

const Modal = () => {
  const contentRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleClickOutside = (event) => {
    if (contentRef.current && !contentRef.current.contains(event.target)) {
      console.log(`object`);
      setIsOpen(false);
    }
  };

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };
  

  return (
    <div>
      <style>
        {`
/* Modal container */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal content */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  text-align: center;
}
	`}
      </style>
      <button
        className="px-2 bg-blue-300 py-1 rounded-lg"
        onClick={toggleModal}
      >
        Toggle Modal
      </button>
      {isOpen && (
        <div
          className="modal-container border border-pink-600 select-none"
          onClick={handleClickOutside}
        >
          <div className="modal-content" ref={contentRef}>
            <h2>Click outside to close</h2>
            <p>This is a modal. Click outside to close.</p>
            <button
              className="px-3 py-1 mt-3 rounded-md bg-teal-300"
              onClick={() => setIsOpen(false)}
            >
              ok
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;

import {userRef,UseEffect} from "react"
function App()=>{
  const refOne = useRef(null);
  
  useEffect(() => {
    document.addEventListener("click", handleClickOutside, true);
  }, []);
  
  const handleClickOutside = (e) => {
    if (refOne.current && !refOne.current.contains(e.target)) {
      console.log("clicked outside");
    } else {
      console.log(`clicked inside div`);
    }
  };
 return(
 <div style={{width:"10rem",height:"10rem", backGround:"red"}}>
 </div>) 
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};