Skip to content

Commit

Permalink
Merge pull request VanshKing30#424 from iamabhishek2828/updation
Browse files Browse the repository at this point in the history 
Fix invalid href attributes
  • Loading branch information
@hustlerZzZ
hustlerZzZ authored Jul 9, 2024
2 parents 5991a02 + 88bdb60 commit 3536d2f
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 96 deletions.
18 changes: 9 additions & 9 deletions src/components/CanteenCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -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({});
Expand Down Expand Up @@ -33,28 +33,28 @@ const CanteenCard = ({ canteen }) => {
const truncatedName = canteen.name.length > 14 ? canteen.name.substring(0, 14) + "..." : canteen.name;

return (
<div className="sm:w-64 w-[80vw] px-5 bg-white flex flex-col border pt-5 h-[320px] border-white rounded-lg shadow dark:bg-none dark:border-white my-4 mx-2 transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:shadow-green-500/50 ... md:justify-center h-[380px]">
<div className="sm:w-64 w-[80vw] px-5 bg-white flex flex-col border pt-5 h-[320px] border-white rounded-lg shadow dark:bg-none dark:border-white my-4 mx-2 transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:shadow-green-500/50 ... md:justify-center">
{loading ? (
<div className="flex justify-center items-center h-48 w-full">
<ClipLoader size={50} color={"#123abc"} loading={loading} />
</div>
) : (
<div className="flex justify-center">
<a href="#">
<div className=""><img
<div>
<img
className="rounded-t-lg h-48 w-full object-cover"
src={canteen.canteenImage ? canteen.canteenImage : imageSrc}
alt={canteen.name}
/></div>
</a>
/>
</div>
</div>
)}
<div className="p-5">
<a href="#">
<div>
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-900 hover:text-green-500 transition duration-300 ease-in-out overflow-x-hidden">
{truncatedName}
</h5>
</a>
</div>

<Link
to={`/menu/${canteen._id}`}
Expand Down Expand Up @@ -82,4 +82,4 @@ const CanteenCard = ({ canteen }) => {
);
};

export default CanteenCard;
export default CanteenCard;
36 changes: 18 additions & 18 deletions src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import { Link } from "react-router-dom"
import { Link } from "react-router-dom";

export default function Footer(){
return (
<footer className="p-4 bg-blue-950 md:p-8 lg:p-10 dark:bg-teal-700">
<div className="mx-auto max-w-screen-xl text-center">
<a href="#" className="flex justify-center items-center text-2xl font-semibold text-pink-800 ">
<img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="title" width={"200px"}/>
</a>
<p className="my-6 text-white ">Discover culinary bliss with our diverse array of recipes and foodie resources – your ultimate destination for gastronomic inspiration.</p>
<ul className="flex flex-wrap justify-center items-center mb-6 text-gray-400 ">
export default function Footer() {
return (
<footer className="p-4 bg-blue-950 md:p-8 lg:p-10 dark:bg-teal-700">
<div className="mx-auto max-w-screen-xl text-center">
<Link to="/" className="flex justify-center items-center text-2xl font-semibold text-pink-800">
<img src="https://foodies-web-app.vercel.app/static/media/logo2.db6bd5028bb56c6572c7.png" alt="title" width="200px" />
</Link>
<p className="my-6 text-white">Discover culinary bliss with our diverse array of recipes and foodie resources – your ultimate destination for gastronomic inspiration.</p>
<ul className="flex flex-wrap justify-center items-center mb-6 text-gray-400">
<li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
<Link to="/about">About</Link>
<Link to="/about">About</Link>
</li>
<li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
<Link to="/news">News</Link>
<Link to="/news">News</Link>
</li>
</ul>
<span className="text-sm text-white sm:text-center ">© 2024-2025 <a href="#" className="hover:underline">Foodies™</a>. All Rights Reserved.</span>
</div>
</footer>
)
}
</ul>
<span className="text-sm text-white sm:text-center">© 2024-2025 <Link to="/" className="hover:underline">Foodies™</Link>. All Rights Reserved.</span>
</div>
</footer>
);
}
124 changes: 65 additions & 59 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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 = () => {
Expand All @@ -54,7 +49,6 @@ const Navbar = () => {
/>
<div className="max-w-full mx-auto px-4 sm:px-6 lg:px-12">
<div className="flex items-center justify-between h-16">
{/* Foodies Web Logo */}
<div className="flex-shrink-0">
<Link to="/home" className="flex items-center">
<img src={logo} alt="Logo" className="h-12" />
Expand All @@ -64,58 +58,59 @@ const Navbar = () => {
<div className="hidden md:block">
<div className="ml-16 flex gap-6 items-baseline space-x-4">
{token ? (
<NavItem to={`/section/${canteenId}`} icon={<IconCanteen />}>
My&nbsp;Canteen
<NavItem to={`/section/${canteenId}`} onClick={toggleMenu}>
<IconCanteen /> My Canteen
</NavItem>
) : (
<NavItem to="/home" icon={<IconHome />}>
Home
<NavItem to="/home" onClick={toggleMenu}>
<IconHome /> Home
</NavItem>
)}
<NavItem to="/about" icon={<IconAbout />}>
About
<NavItem to="/about" onClick={toggleMenu}>
<IconAbout /> About
</NavItem>
<NavItem to="/news" icon={<IconNews />}>
News
<NavItem to="/news" onClick={toggleMenu}>
<IconNews /> News
</NavItem>
<NavItem to="/rateus" icon={<IconRateUs />}>
RateUs
<NavItem to="/rateus" onClick={toggleMenu}>
<IconRateUs /> RateUs
</NavItem>
{/* Conditionally render "My Canteen" button */}
</div>
</div>

<div className="hidden md:flex items-center gap-5">
<button
onClick={toggleTheme}
className="p-2 rounded focus:outline-none text-4xl border-none outline-none">
className="p-2 rounded focus:outline-none text-4xl border-none outline-none"
>
{theme === "dark" ? "🌞" : "🌙"}
</button>
<div>
<Link to="/">
<button
onClick={logout}
className={`py-1 px-2 w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${
theme === "dark"
? "bg-white text-black"
: "bg-green-400 hover:bg-green-600 hover:shadow-green text-white"
}`}>
Log out
</button>
</Link>
</div>
<Link to="/">
<button
onClick={logout}
className={`py-1 px-2 w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110 ${
theme === "dark"
? "bg-white text-black"
: "bg-green-400 hover:bg-green-600 hover:shadow-green text-white"
}`}
>
Log out
</button>
</Link>
</div>

<div className="-mr-2 flex md:hidden">
<button
onClick={toggleTheme}
className="p-2 rounded focus:outline-none text-2xl border-none outline-none">
className="p-2 rounded focus:outline-none text-2xl border-none outline-none"
>
{theme === "dark" ? "🌞" : "🌙"}
</button>
<button
onClick={toggleMenu}
className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
aria-expanded="false">
aria-expanded={isOpen}
>
{isOpen ? (
<IoClose className="text-white" />
) : (
Expand All @@ -132,27 +127,37 @@ const Navbar = () => {
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center">
className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
>
<div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
<MobileNavItem to="/home">Home</MobileNavItem>
<MobileNavItem to="/about">About us</MobileNavItem>
<MobileNavItem to="/news">News</MobileNavItem>
<MobileNavItem to="/contact">Contact</MobileNavItem>
<MobileNavItem to="/rateus">RateUs</MobileNavItem>
{/* Conditionally render "My Canteen" button */}
<MobileNavItem to="/home" onClick={toggleMenu}>
Home
</MobileNavItem>
<MobileNavItem to="/about" onClick={toggleMenu}>
About us
</MobileNavItem>
<MobileNavItem to="/news" onClick={toggleMenu}>
News
</MobileNavItem>
<MobileNavItem to="/contact" onClick={toggleMenu}>
Contact
</MobileNavItem>
<MobileNavItem to="/rateus" onClick={toggleMenu}>
RateUs
</MobileNavItem>
{canteenId && (
<MobileNavItem to={`/section/${canteenId}`}>
<MobileNavItem to={`/section/${canteenId}`} onClick={toggleMenu}>
My Canteen
</MobileNavItem>
)}
<MobileNavItem to="/">
<MobileNavItem to="/" onClick={() => { logout(); toggleMenu(); }}>
<button
onClick={logout}
className={`rounded transition duration-300 ease-in-out transform hover:scale-105 ${
theme === "dark"
? "bg-white text-black"
: "bg-green-500 hover:bg-green-700 text-white py-1 px-2"
}`}>
}`}
>
Log out
</button>
</MobileNavItem>
Expand All @@ -165,22 +170,23 @@ const Navbar = () => {
);
};

const NavItem = ({ icon, to, children }) => {
const NavItem = ({ to, children, onClick }) => {
return (
<Link
to={to}
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 block hover:bg-opacity-50">
{icon && <span>{icon}</span>}
<span>{children}</span>
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}
</Link>
);
};

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 (
<Link to={to} className={classname + " hover:bg-gray-700"}>
<Link to={to} className={className + " hover:bg-gray-700"} onClick={onClick}>
{children}
</Link>
);
Expand Down
16 changes: 6 additions & 10 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -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
};

0 comments on commit 3536d2f

Please sign in to comment.