useClickOutside custom hook

src/index.css

@@ -97,14 +97,14 @@
   .loader {
     width: 80px;
     height: 70px;
-    border: 5px solid theme(colors.background);
+    border: 5px solid theme(colors.transparent);
     padding: 0 8px;
     box-sizing: border-box;
     background:
       linear-gradient(theme(colors.foreground) 0 0) 0 0/8px 20px,
       linear-gradient(theme(colors.foreground) 0 0) 100% 0/8px 20px,
       radial-gradient(farthest-side, theme(colors.foreground) 90%, #0000) 0 5px/8px 8px content-box,
-      theme(colors.background);
+      theme(colors.transparent);
     background-repeat: no-repeat;
     animation: l3 2s infinite linear;
   }

src/pages/CustomHooks/CustomHooks.jsx

@@ -1,9 +1,13 @@
-import UseFetchHookTest from "./use-fetch/test"
+import UseFetchHookTest from "./use-fetch/test";
+import UseOnClickOutsideTest from "./use-outside-click/test";
 
 const CustomHooks = () => {
-  return <div className="container flex flex-col gap-3 justify-start items-center py-10">
-    <UseFetchHookTest />
-  </div>
-}
+  return (
+    <div className="container flex flex-col gap-3 justify-start items-center py-10 space-y-10">
+      <UseFetchHookTest />
+      <UseOnClickOutsideTest />
+    </div>
+  );
+};
 
-export default CustomHooks
+export default CustomHooks;

src/pages/CustomHooks/use-fetch/test.jsx

@@ -6,11 +6,9 @@ const UseFetchHookTest = () => {
     {},
   );
 
-  console.log(error, data, pending);
-
   return (
-    <div>
-      <h1 className="text-2xl font-mono text-center">
+    <div className="min-h-[200px]">
+      <h1 className="text-2xl font-mono text-center mb-2">
         <span className="text-primary font-bold">useFetch</span> Hook
       </h1>
       {pending ? (

src/pages/CustomHooks/use-outside-click/test.jsx

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+import { useRef, useState } from "react";
+import { useOutsideClick } from "./useOutsideClick";
+
+const UseOnClickOutsideTest = () => {
+  const [showContent, setShowContent] = useState(false);
+  const ref = useRef();
+  useOutsideClick(ref, () => setShowContent(false));
+
+  return (
+    <div>
+      {showContent ? (
+        <div
+          ref={ref}
+          className="w-[450px] bg-gr py-4 px-3 border-border border-2"
+        >
+          <h1 className="text-xl font-bold mb-1">This is a random content</h1>
+          <p>
+            Please Click outside of this to close this. It won&apos;t close if
+            you click inside of this content
+          </p>
+        </div>
+      ) : (
+        <Button onClick={() => setShowContent(true)}>Show Content</Button>
+      )}
+    </div>
+  );
+};
+
+export default UseOnClickOutsideTest;

src/pages/CustomHooks/use-outside-click/useOutsideClick.jsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+export const useOutsideClick = (ref, handler) => {
+  useEffect(() => {
+
+    function listener(event) {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler(event);
+    }
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [handler, ref]);
+};