Add DaisyUI and build new navbar with links with it (#45)

* Add DaisyUI

* Add NavBar

package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.0.2",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/w3c-web-serial": "^1.0.6",
     "eslint-plugin-tailwindcss": "^3.13.1",
@@ -29,6 +29,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "daisyui": "^4.6.0",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
     "postcss": "^8",

src/app/page.tsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import dynamic from "next/dynamic";
 import Controller from "@/components/Controller/Controller";
 import { Loader } from "@/components/Loader/Loader";
+import { NavBar } from "@/components/NavBar/NavBar";
 
 const Home = () => {
   const SerialLoader = dynamic(
@@ -17,8 +18,8 @@ const Home = () => {
 
   return (
     <>
-      <header className="w-[100%] bg-gray-700 p-4 text-left text-2xl">
-        Mayhem Hub
+      <header>
+        <NavBar />
       </header>
       <main className="flex h-full min-h-screen flex-col items-center justify-between p-1">
         <SerialLoader>

src/components/NavBar/NavBar.tsx

@@ -0,0 +1,28 @@
+export const NavBar = () => {
+  return (
+    <div className="navbar bg-gray-700">
+      <div className="flex-1">
+        <a className="btn btn-ghost text-xl">Mayhem Hub</a>
+      </div>
+      <div className="flex-none">
+        <ul className="menu menu-horizontal px-1">
+          <li>
+            <a href="https://wiki.hackrf.app" target="_blank">
+              Wiki
+            </a>
+          </li>
+          <li>
+            <a href="https://repo.hackrf.app" target="_blank">
+              Repo
+            </a>
+          </li>
+          <li>
+            <a href="https://release.hackrf.app" target="_blank">
+              Firmware Releases
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};

tailwind.config.ts

@@ -18,6 +18,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  plugins: [require("daisyui")],
 };
 export default config;