Tailwind Header

client/src/Components/Header.tsx

@@ -1,56 +1,60 @@
-import { useState } from "react";
 import { Link } from "react-router-dom";
 import IceCreamLogo from "./IceCreamLogo";
 import CartPage from "../pages/cart/CartPage";
-import styles from "./header.module.css";
-
+import { NavLink } from "react-router-dom";
 
 export default function IceCreamHeader() {
-  const [currentPagePath, setCurrentPagePath] = useState<string>("/");
-
-  function handleSetStarPage(path: string) {
-    setCurrentPagePath(path)
-  }
-
   return (
-    <header className={styles["header-container"]}>
-      <Link to="/" onClick={() => handleSetStarPage("/")}><IceCreamLogo />Randomice</Link>
+    <header className="w-full flex justify-between items-center h-[100px] px-4 mt-4">
+      <Link to="/">
+      <div className="flex items-center justify-center mb-2">
+        <IceCreamLogo/>
+        </div>
+           <span className="mx-2">Randomice </span>  
+      </Link>
+
       <nav>
-        <ul className={styles["nav-container"]}>
+        <ul className="flex justify-center list-none ml-2">
           <NavOption
             destinationUrl="/hall-of-fame"
             destinationPage="Hall of Fame"
-            currentPagePath={currentPagePath}
-            setCurrentPagePath={setCurrentPagePath}
           />
+
           <NavOption
             destinationUrl="/random-flavors"
             destinationPage="Generate Random Flavors"
-            currentPagePath={currentPagePath}
-            setCurrentPagePath={setCurrentPagePath}
           />
         </ul>
       </nav>
-      <div className={styles["header-end"]}>
-        <button className={styles["login-button"]}>login/logout</button>
+      <div className="flex ml-auto">
         <CartPage />
+        <button className="ml-2.5 mr-2.5 hover:underline">login/logout</button>
       </div>
     </header>
   );
 }
 
 interface NavOptionProps {
+  className?: string;
   destinationUrl: string;
   destinationPage: string;
-  currentPagePath: string;
-  setCurrentPagePath(pageUrl: string): void;
 }
 
-function NavOption(props: NavOptionProps) {
+function NavOption({ className, destinationUrl, destinationPage}) {
+  const linkBaseClasses = "text-center block py-2 px-4 rounded w-auto whitespace-nowrap";
+  const activeClasses = "border bg-purple-500 hover:bg-purple-700 text-white";
+  const inactiveClasses = "border border-white text-black-500 hover:border-black";
+
   return (
-    <li className={styles["nav-item"]}>
-      <Link to={props.destinationUrl} onClick={() => props.setCurrentPagePath(props.destinationUrl)}>{props.currentPagePath === props.destinationUrl ? "*" : ""} 
-        {props.destinationPage}</Link>
+    <li className={`${className}`}>
+      <NavLink
+        to={destinationUrl}
+        className={({ isActive }) => 
+          `${linkBaseClasses} ${isActive ? activeClasses : inactiveClasses}`
+      }
+      >
+        {destinationPage}
+      </NavLink>
     </li>
   );
 }

client/src/components/FlavorThumbnail.tsx

@@ -1,5 +1,3 @@
-import styles from "./flavor-thumbnail.module.css";
-
 export type Flavor = {
   name: string;
   price: number;
@@ -11,17 +9,23 @@ export type Flavor = {
 export default function FlavorThumbnail({ flavor }: { flavor: Flavor }) {
   return (
     <>
-      <div className={styles.container}>
-        <img
-          className={styles.image}
-          src={flavor.image}
-          alt={`Photo of ${flavor.name}`}
-        />
-        <p className={styles.text}>
-          <strong>{flavor.name}</strong>
-        </p>
-        <p className={styles.text}>${flavor.price}</p>
+      <div className="max-w-xs mx-auto bg-white p-5">
+        <div className="flex justify-center">
+        <img className="w-2/3 h-1/2 object-contain"
+            src={flavor.image}
+            alt={`Photo of ${flavor.name}`}
+          />
+        </div>
+        <div className="text-center mt-4">
+            <h3 className="text-lg font-semibold">{flavor.name}</h3>    
+            <p className="text-lg mt-2 mb-2">${flavor.price}</p>
+           <button className="bg-white text-black uppercase text-sm px-6 py-3 rounded-full border-2 border-black hover:bg-black hover:text-white focus:outline-none focus:border-4 focus:border-black">
+            Add to your cart
+            </button> 
+        </div>
       </div>
     </>
   );
 }
+
+