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

@@ -165,5 +165,13 @@
     "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 }
+}