refactor: rm use of useHooks for native DaisyUI btn

package.json

@@ -22,7 +22,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-redux": "^8.1.2",
-    "usehooks-ts": "^2.9.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {

src/components/navbar/DropDown.tsx

@@ -1,35 +1,18 @@
-"use client";
-
-import { useRef } from "react";
-import { useOnClickOutside } from "usehooks-ts";
 import DropDownLink from "./DropDownLink";
 
 export default function DropDown({ name }: { name: string }) {
-  const ref = useRef<HTMLDetailsElement | null>(null);
-
-  const handleClick = () => {
-    if (ref.current) {
-      ref.current.open = !open;
-    }
-  };
-
-  useOnClickOutside(ref, () => handleClick());
 
   return (
-    <details ref={ref}>
-      <summary className=" pl-2 text-white font-semibold hover:text-white duration-200">
-        {name}
-      </summary>
-      <ul className="mx-4 p-2 bg-white  left-2 font-medium z-10">
-        <li>
-          <DropDownLink handleClick={handleClick} title="Link 1" />
-          <DropDownLink
-            handleClick={handleClick}
-            title="404???"
-            href="/hello404"
-          />
-        </li>
+    <div className="dropdown bg-transparent dropdown-bottom">
+      <label tabIndex={0} className="btn m-0 p-0 bg-transparent border-none hover:border-none hover:bg-transparent">{ name }</label>
+      <ul tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box right-0">
+        <DropDownLink title="Link 1" />
+        <DropDownLink
+          title="404???"
+          href="/hello404"
+        />
       </ul>
-    </details>
+    </div>
+
   );
 }

src/components/navbar/DropDownLink.tsx

@@ -3,21 +3,20 @@ import Link from "next/link";
 interface DropDownLinkProps {
   title: string;
   href?: string;
-  handleClick: () => void;
 }
 
 export default function DropDownLink({
   title,
   href = "#",
-  handleClick,
 }: DropDownLinkProps) {
   return (
-    <Link
-      href={href}
-      className="text-neutral hover:text-primary duration-200"
-      onClick={handleClick}
-    >
-      {title}
-    </Link>
+    <li>
+      <Link
+        href={href}
+        className="text-neutral hover:text-primary duration-200"
+      >
+        {title}
+      </Link>
+    </li>
   );
 }

src/components/navbar/Navbar.tsx

@@ -12,8 +12,8 @@ export default function Navbar() {
       </div>
       <div>
         <Bell notificationCount={notificationCount} />
-        <ul className="menu menu-horizontal px-1 ml-6">
-          <li className="flex flex-row items-center">
+        <ul className="menu menu-horizontal px-1 ml-6 ">
+          <li className="flex flex-row items-center ">
             <Avatar image="/avatar.png" height={34} width={34} />
             <DropDown name={name} />
           </li>

yarn.lock

@@ -5633,11 +5633,6 @@ use-sync-external-store@^1.0.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-usehooks-ts@^2.9.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.9.1.tgz#953d3284851ffd097432379e271ce046a8180b37"
-  integrity sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==
-
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"