diff --git a/src/components/CanteenCard.jsx b/src/components/CanteenCard.jsx index 3853722..14b5fb7 100644 --- a/src/components/CanteenCard.jsx +++ b/src/components/CanteenCard.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import fetchRandomRestaurantImage from "../utils/unsplash"; -import { ClipLoader } from "react-spinners"; // Import ClipLoader from react-spinners +import { ClipLoader } from "react-spinners"; const CanteenCard = ({ canteen }) => { const [selectedRecipes, setSelectedRecipes] = useState({}); @@ -33,28 +33,28 @@ const CanteenCard = ({ canteen }) => { const truncatedName = canteen.name.length > 14 ? canteen.name.substring(0, 14) + "..." : canteen.name; return ( -
+
{loading ? (
) : (
- -
+ {canteen.name}
- + /> +
)}
- +
{truncatedName}
- +
{ ); }; -export default CanteenCard; \ No newline at end of file +export default CanteenCard; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 45d5c69..a57af7f 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,23 +1,23 @@ -import { Link } from "react-router-dom" +import { Link } from "react-router-dom"; -export default function Footer(){ - return ( -
-
- - title - -

Discover culinary bliss with our diverse array of recipes and foodie resources – your ultimate destination for gastronomic inspiration.

-
    +export default function Footer() { + return ( +
    +
    + + title + +

    Discover culinary bliss with our diverse array of recipes and foodie resources – your ultimate destination for gastronomic inspiration.

    +
    • - About + About
    • - News + News
      • -
    - © 2024-2025 Foodies™. All Rights Reserved. -
    -
    - ) -} \ No newline at end of file +
+ © 2024-2025 Foodies™. All Rights Reserved. +
+
+ ); +} diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 80757f5..47b0ee6 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,21 +1,21 @@ -import React, { useState, useContext, useEffect } from "react"; +import React, { useContext, useState, useEffect } from "react"; import { Link } from "react-router-dom"; import logo from "../assets/logo2.png"; import { motion, AnimatePresence, useScroll } from "framer-motion"; import { IoClose } from "react-icons/io5"; import { GiHamburgerMenu } from "react-icons/gi"; +import { jwtDecode } from "jwt-decode"; // Corrected import import { ThemeContext } from "../themeContext"; -import { jwtDecode } from "jwt-decode"; import { useAuth } from "../authContext"; const Navbar = () => { const { logout } = useAuth(); - // const [canteenId, setCanteenId] = useState(null); const { theme, toggleTheme } = useContext(ThemeContext); const [isOpen, setIsOpen] = useState(false); const { scrollYProgress } = useScroll(); const token = localStorage.getItem("token"); const canteenId = localStorage.getItem("canteenId"); + useEffect(() => { const token = localStorage.getItem("authToken"); if (token) { @@ -29,16 +29,11 @@ const Navbar = () => { } } }, []); - const removetoken = () => { - const usertoken = localStorage.getItem("usertoken"); - const token = localStorage.getItem("token"); - if (usertoken) { - localStorage.removeItem("usertoken"); - } - if (token) { - localStorage.removeItem("token"); - localStorage.removeItem("canteenId"); - } + + const removeToken = () => { + localStorage.removeItem("usertoken"); + localStorage.removeItem("token"); + localStorage.removeItem("canteenId"); }; const toggleMenu = () => { @@ -54,7 +49,6 @@ const Navbar = () => { />
- {/* Foodies Web Logo */}
Logo @@ -64,58 +58,59 @@ const Navbar = () => {
{token ? ( - }> - My Canteen + + My Canteen ) : ( - }> - Home + + Home )} - }> - About + + About - }> - News + + News - }> - RateUs + + RateUs - {/* Conditionally render "My Canteen" button */}
-
- - - -
+ + +
@@ -165,22 +170,23 @@ const Navbar = () => { ); }; -const NavItem = ({ icon, to, children }) => { +const NavItem = ({ to, children, onClick }) => { return ( - {icon && {icon}} - {children} + className="flex items-center space-x-2 w-full h-auto relative z-0 rounded-lg transition-all duration-200 hover:scale-125 text-xl hover:bg-opacity-50" + onClick={onClick} + > + {children} ); }; -const MobileNavItem = ({ to, children }) => { - const classname = +const MobileNavItem = ({ to, children, onClick }) => { + const className = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-xl font-medium"; return ( - + {children} ); diff --git a/tailwind.config.js b/tailwind.config.js index 2ef1f4e..247ff28 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,30 +1,26 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: 'class', + darkMode: 'class', // Enable dark mode based on 'class' attribute content: [ "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", + "./src/**/*.{js,ts,jsx,tsx}", // Scan these files for Tailwind CSS classes ], - theme: { extend: { - colors:{ + colors: { customColor: '#484b6a', customBlue: '#151586', aliceblue: '#f0f8ff', cadetblue: '#5f9ea0', lightcadetblue: '#84bbbd', - }, boxShadow: { green: '0 0 4px rgba(0, 255, 0, 0.5)', }, borderWidth: { - '3': '4px', + '3': '4px', // Custom border width utility }, - }, }, - plugins: [], -} - + plugins: [], // No additional Tailwind CSS plugins used +};