Merge pull request #5 from mfdavies/daisy-ui-init

daisy ui init + test

frontend/package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
+    "daisyui": "^4.5.0",
     "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

frontend/src/views/patient/PatientHome.jsx

@@ -1,9 +1,9 @@
+import Navbar from './components/Navbar'
+
 const PatientHome = () => {
     return (
         <div className="min-h-screen bg-blue-100">
-            <header className="bg-blue-600 text-white text-xl py-4 px-6">
-                Patient Dashboard
-            </header>
+            <Navbar />
             <main className="p-6">
                 <h1 className="text-2xl font-semibold mb-4">Welcome to Your Home Page</h1>
                 <p className="text-gray-700">

frontend/src/views/patient/components/Navbar.jsx

@@ -0,0 +1,58 @@
+const Navbar = () => {
+  return (
+    <div className="navbar bg-base-100">
+      <div className="flex-1">
+        <a className="btn btn-ghost text-xl">MobilityMate</a>
+      </div>
+      <div className="flex-none">
+        <div className="dropdown dropdown-end">
+          <div
+            tabIndex={0}
+            className="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow"
+          >
+            <div className="card-body">
+              <span className="font-bold text-lg">8 Items</span>
+              <span className="text-info">Subtotal: $999</span>
+              <div className="card-actions">
+                <button className="btn btn-primary btn-block">View cart</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="dropdown dropdown-end">
+          <div
+            tabIndex={0}
+            role="button"
+            className="btn btn-ghost btn-circle avatar"
+          >
+            <div className="w-10 rounded-full">
+              <img
+                alt="Tailwind CSS Navbar component"
+                src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+              />
+            </div>
+          </div>
+          <ul
+            tabIndex={0}
+            className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
+          >
+            <li>
+              <a className="justify-between">
+                Profile
+                <span className="badge">New</span>
+              </a>
+            </li>
+            <li>
+              <a>Settings</a>
+            </li>
+            <li>
+              <a>Logout</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

frontend/tailwind.config.js

@@ -15,6 +15,6 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [require("daisyui")],
 }