link pre-alpha badge to roadmap

client/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { IconUser } from "@tabler/icons-react";
+import { IconExternalLink, IconUser } from "@tabler/icons-react";
 import Link from "next/link";
 import ThemeToggle from "./ThemeToggle";
 
@@ -22,30 +22,16 @@ export default function Header() {
           </svg>
           chessu
         </Link>
-        <div className="dropdown dropdown-right hover:dropdown-open">
+        <a
-          <label tabIndex={0} className="badge badge-sm cursor-help">
+          title="Project roadmap"
-            pre-alpha
+          className="badge badge-sm badge-secondary gap-0.5"
-          </label>
+          href="https://github.com/users/nizefoo/projects/2"
-          <div
+          target="_blank"
-            tabIndex={0}
+          rel="noopener noreferrer"
-            className="dropdown-content card card-compact bg-primary text-primary-content w-64 shadow"
+        >
-          >
+          pre-alpha
-            <div className="card-body cursor-default">
+          <IconExternalLink size={12} />
-              <p className="text-left text-xs">
+        </a>
-                This project is a work in progress. You can view the roadmap{" "}
-                <a
-                  href="https://github.com/users/nizefoo/projects/2"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="link"
-                >
-                  here
-                </a>
-                .
-              </p>
-            </div>
-          </div>
-        </div>
       </div>
       <div className="flex-none">
         <ThemeToggle />