feat: implement click outside functionality for popup window

components/popup/popupInfo.tsx

@@ -4,12 +4,14 @@ import { Backdrop } from 'components/Backdrop/Backdrop'
 import { createPortal } from 'react-dom'
 import useDelayUnmount from 'hooks/useDelayUnmount'
 import { IoClose } from 'react-icons/io5'
+import { useOnClickOutside } from 'hooks/window'
 
 export const PopupInfo: React.FC<{
   currentCard: IData | null
   onClose: () => void
 }> = ({ currentCard, onClose }) => {
   const showElement = useDelayUnmount(currentCard, 300)
+  const { popupRef } = useOnClickOutside(onClose)
 
   if (!showElement) {
     return null
@@ -27,6 +29,7 @@ export const PopupInfo: React.FC<{
       {createPortal(
         <div
           onClick={(e) => e.stopPropagation()}
+          ref={popupRef}
           className={`fixed left-1/2 top-1/2 z-[150] max-w-[500px] -translate-x-1/2 -translate-y-1/2 transition-all ${
             currentCard ? 'animate-scale-appearance' : 'animate-scale-hide'
           } flex h-fit w-[90%] flex-col justify-between gap-5 overflow-hidden rounded-2xl bg-light-primary border-2 border-theme-secondary/50 px-5 py-10 dark:bg-slate-800 dark:border dark:border-theme-primary/8`}

database/data_structures/dsa_tutorials.json

@@ -136,20 +136,20 @@
     "language": "english"
   },
   {
-    "name":"Code step by step",
+    "name": "Code step by step",
     "description": "A comprehensive playlist in Hindi that teaches developers data structures in Javascript from scratch.",
     "url": "https://www.youtube.com/watch?v=wZHtZ_VJGKI&list=PL8p2I9GklV47TMMnPzqnkCtSOS3ebr4O7&ab_channel=CodeStepByStep",
-    "category":"data-structures",
-    "subcategory":"dsa_tutorials",
-    "language":"hindi"
+    "category": "data-structures",
+    "subcategory": "dsa_tutorials",
+    "language": "hindi"
   },
   {
-    "name":"DataFlair",
+    "name": "DataFlair",
     "description": "A comprehensive playlist in Hindi that teaches developers data structures and algorithms using C from scratch.",
     "url": "https://youtube.com/playlist?list=PLf0LpPWikpPfA_vez2NndnYuQy6WkpTzc&si=K2-zGZeRd34fVzwT",
-    "category":"data-structures",
-    "subcategory":"dsa_tutorials",
-    "language":"hindi"
+    "category": "data-structures",
+    "subcategory": "dsa_tutorials",
+    "language": "hindi"
   },
   {
     "name": "Simple Snippets",
@@ -161,9 +161,17 @@
   },
   {
     "name": "Strivers 79 Last Moment DSA Sheet",
-    "description": "The Striver’s 79 Sheet contains very handily crafted and picked top coding interview questions from different topics of Data Structures & Algorithms.",
+    "description": "The Striver's 79 Sheet contains very handily crafted and picked top coding interview questions from different topics of Data Structures & Algorithms.",
     "url": "https://takeuforward.org/interview-sheets/strivers-79-last-moment-dsa-sheet-ace-interviews/",
     "category": "data-structures",
     "subcategory": "dsa_tutorials"
+  },
+  {
+    "name": "ALL IN ONE: DSA By HuXn WebDev",
+    "description": "HuXn's YouTube channel offers a free, comprehensive, and engaging DSA course in JavaScript, with clear explanations and practical examples—perfect for all learners!",
+    "url": "https://www.youtube.com/watch?v=wBtPGnVnA9g&list=PLSDeUiTMfxW5m9r2U1ruVXPKrP2aoVOVb&index=1",
+    "category": "data-structures",
+    "subcategory": "dsa_tutorials",
+    "language": "english"
   }
 ]

hooks/window/index.ts

@@ -0,0 +1,26 @@
+'use client'
+
+import { SetStateAction, useEffect, useRef, useCallback } from 'react'
+import { IData } from 'types'
+
+export const useOnClickOutside = (
+  onClick: React.Dispatch<SetStateAction<IData | null>>
+): { popupRef: React.RefObject<HTMLDivElement> } => {
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (popupRef.current && !popupRef.current.contains(e.target as Node)) {
+      onClick(null)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [onClick])
+
+  return { popupRef }
+}