Merge pull request #33 from fac30:header_2

Header 2

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

postcss.config.js

@@ -1,7 +1,6 @@
 export default {
-	content: ['./src/**/*.{js,ts,jsx,tsx}'],
-	theme: {
-		extend: {},
+	plugins: {
+	  tailwindcss: {},
+	  autoprefixer: {},
 	},
-	plugins: [],
-};
+  };

src/App.tsx

@@ -1,13 +1,17 @@
-import './App.css'
-import Header from './sections/Header'
-import Content from './sections/Content'
+import './App.css';
+import Header from './sections/Header';
+import Content from './sections/Content';
 import Footer from './sections/Footer';
+import Button from './buttons/Button';
 
 function App() {
   return (
 		<>
 			<Header />
 			<Content />
+			<Button onClick={function (): void {
+			  throw new Error('Function not implemented.')
+		    } } label={'Click me'} />
 			<Footer />
 		</>
   );

src/index.css

@@ -1,4 +1,7 @@
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

src/sections/Header.tsx

@@ -1,26 +1,56 @@
-import React from "react";
+import React, { useState} from "react";
+import {Link} from 'react-router-dom';
 
 
 // declare the component with a capitalised name
 const Header: React.FC = () => {
-  return (
-		<>
-		<header>
-			<img 
-				src="../assets/logo_backgrounf.png"
-				width="60"
-				height="60"
-				alt="logo of the app"
-			/>
-			<span>
-				<h1>MoodTime</h1>
-			</span>
-			<nav>
-				{/* Hamburger Menu Here? */}
-			</nav>
-			</header>
-			<hr/>
-		</>
+    const [menuOpen, setMenuOpen] = useState(false);
+
+
+    return (
+      <header className="bg-[#929cf8] text-black p-4"> 
+        <div className="container mx-auto flex justify-between items-center">
+		    {/* Left side: Logo and Brand Name */}
+			    <div className="flex items-center space-x-3">
+                <img
+                    src="../assets/logo_background.png" // Replace this with the actual path to your logo
+                    alt="Brand Logo"
+                    className="h-8 w-8"
+                />
+                <span className="text-xl font-bold">SpotifyMoodList</span>
+          </div>
+        </div>
+
+			{/* Right side: Menu with three dots */}
+      <nav>
+      <div className="relative">
+          <button
+            className="text-3xl focus:outline-none"
+            onClick={() => setMenuOpen(!menuOpen)}
+          >
+            &#x22EE; {/* Unicode for vertical ellipsis */}
+          </button>
+
+          {/* Dropdown Menu */}
+          {menuOpen && (
+            <div className="absolute right-0 mt-2 w-48 bg-white text-gray-900 rounded-md shadow-lg">
+              <ul className="py-1">
+                <li>
+                  <Link
+                    to="/option"
+                    className="block px-4 py-2 text-sm hover:bg-gray-100"
+                    onClick={() => setMenuOpen(false)}
+                  >
+                    Go Again
+                  </Link>
+                </li>
+              </ul>
+            </div>
+           )}
+          </div>
+      </nav>
+    </header>
+
   )
 }
 

src/styles.css

@@ -1,7 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 /* Custom styles go here if needed */
 
 /* Colours for the app: */

tailwind.config.js

@@ -1,9 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};