Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Todays special component Updated #190

Closed
wants to merge 2 commits into from
Closed

Todays special component Updated #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2be66cd
Fix - Fixed Scroll View of Navigation Links
Ashwinib26 Oct 9, 2024
6a0fbf0
Add - Added hover effect to Item boxes , added original and offer pri…
Ashwinib26 Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,13 @@ input[type="radio"] {
cursor: pointer;
font-size: 2rem;
margin-bottom: 0;
}
}

.card {
transition: all 0.3s ease; /* Ensure smooth transitions */
}

/* Shadow effect on hover */
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */
}
4 changes: 4 additions & 0 deletions frontend/src/components/Pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import bgpic from "../../assets/img/abt1.jpg";
import React, { useEffect } from 'react';

export default function About() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div id="about" className="relative w-full h-screen md:mt-28">
<div
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/Pages/Boardgame.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState , useEffect } from 'react';
import board1 from "../../assets/Boardgames/board1.png";
import board2 from "../../assets/Boardgames/board2.png";
import board3 from "../../assets/Boardgames/board3.jpg";
Expand Down Expand Up @@ -162,7 +162,9 @@ export default function Boardgame() {
},
];


useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<>
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Pages/Event.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,10 @@ export default function Event() {
};
}, []);

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<>
<div id="event" className="w-full h-fit bg-amber-100 md:overflow-hidden ">
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@ import Landing from "../ui/Landing";
import ReviewCarousel from "../ui/ReviewCarousel";
import FeedbackForm from "../ui/FeedbackForm";
import About from "./About";
import React, { useEffect } from 'react';

export default function Home() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div id="home" className="bg-[#FDF3C7]">
<Landing />
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/Pages/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Link } from "react-router-dom";
import photo from "../../assets/login.png";
import React, { useState } from "react";
import React, { useState , useEffect } from "react";

const Login = () => {
const API_URL = process.env.VITE_BACKEND_URL || "http://localhost:3000";
Expand Down Expand Up @@ -41,6 +41,10 @@ const Login = () => {
}
};

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<div className="w-screen h-screen flex items-center justify-center pt-10">
<img src={photo} alt="login" className=" w-3/4 absolute" />
Expand Down
16 changes: 13 additions & 3 deletions frontend/src/components/Pages/Menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState , useEffect } from 'react';
import { motion } from 'framer-motion';
import Mybook from './MyBook';
import TodaysSpecial from './TodaysSpecial';
Expand Down Expand Up @@ -28,6 +28,10 @@ function ParallaxImage() {
y: mousePosition.y / 30,
};

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<>
<div className="w-full h-auto bg-amber-100 items-center justify-center overflow-hidden" onMouseMove={handleMouseMove}>
Expand Down Expand Up @@ -56,10 +60,16 @@ function ParallaxImage() {
<h1 className="text-5xl md:text-9xl font-roboto">Flip Menu</h1>
<GiArrowDunk size={60} className="mt-2 text-orange-400" />
</div>
<div className="w-full md:flex md:items-center md:justify-center">
{/* <div className="w-full md:flex md:items-center md:justify-center">
<Mybook />
</div>
<TodaysSpecial /> */}
<div className="w-full md:flex md:items-center md:justify-center mb-20"> {/* Adjust this container */}
<Mybook />
</div>
<TodaysSpecial />
<div className="w-full md:flex md:items-center md:justify-center" style={{ paddingBottom: '80px' }}> {/* Add bottom padding here */}
<TodaysSpecial />
</div>
</div>
</>
);
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Pages/MyBook.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ function MyBook() {
return () => window.removeEventListener('resize', handleResize);
}, []);

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<div style={BgTextureStyle} className=" mt-2 mb-20 overflow-hidden w-full h-full flex justify-center items-center ">
<HTMLFlipBook
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Pages/Notfound.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import Notfound from "../../assets/Menu_assets/Notfound.gif"
import React, { useState , useEffect } from 'react';

const NotFound = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div>
<div className="flex flex-col items-center justify-center h-screen">
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/Pages/Pages.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { forwardRef } from "react";
import PropTypes from "prop-types";
import React, { useState , useEffect , forwardRef } from 'react';

const Page = forwardRef((props, ref) => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div className="demoPage bg-white" ref={ref}>
<div className="h-full">{props.children}</div>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/Pages/Register.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useState , useEffect } from "react";
import pic from "../../assets/img/abt1.jpg";
import pic2 from "../../assets/img/abt1.png";
import pic3 from "../../assets/img/abt2.png";
Expand Down Expand Up @@ -33,6 +33,10 @@ export default function Register() {
.catch((error) => console.log(error));
};

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<>
<div className="w-full mx-auto mt-10 lg:mt-0 md:mt-0">
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/Pages/Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useState , useEffect } from "react";
import photo from "../../assets/login.png";

const Signup = () => {
Expand Down Expand Up @@ -26,6 +26,10 @@ const Signup = () => {
console.log(result);
};

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<div className="w-screen h-screen flex items-center justify-center pt-10">
<img src={photo} alt="login" className=" w-3/4 absolute" />
Expand Down
66 changes: 54 additions & 12 deletions frontend/src/components/Pages/TodaysSpecial.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,25 @@ import caesar_salad from '../../assets/TSimg/caesar_salad.webp';

const menuItems = {
coffee: [
{ name: "Espresso", description: "Rich and bold coffee shot.", image: espresso },
{ name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino },
{ name: "Latte", description: "Smooth coffee with steamed milk.", image: latte },
{ name: "Espresso", description: "Rich and bold coffee shot.", image: espresso, originalPrice: "$3.00", offerPrice: "$2.50" },
{ name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino, originalPrice: "$3.50", offerPrice: "$3.00" },
{ name: "Latte", description: "Smooth coffee with steamed milk.", image: latte, originalPrice: "$4.00", offerPrice: "$3.50" },
],
drinks: [
{ name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie },
{ name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade },
{ name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea },
{ name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie, originalPrice: "$4.50", offerPrice: "$4.00" },
{ name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade, originalPrice: "$2.50", offerPrice: "$2.00" },
{ name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea, originalPrice: "$2.00", offerPrice: "$1.50" },
],
food: [
{ name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich },
{ name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera },
{ name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad },
{ name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich, originalPrice: "$3.50", offerPrice: "$3.00" },
{ name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera, originalPrice: "$5.50", offerPrice: "$5.00" },
{ name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad, originalPrice: "$5.00", offerPrice: "$4.50" },
Comment on lines +14 to +26
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Store price values as numbers and format them when rendering

The originalPrice and offerPrice are currently stored as strings with currency symbols, e.g., "$3.00". It's better practice to store price values as numeric types without currency symbols and format them when displaying. This allows for easier calculations, accurate sorting, and consistent formatting across the application.

Update the menuItems data to use numeric values:

- { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso, originalPrice: "$3.00", offerPrice: "$2.50" },
+ { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso, originalPrice: 3.00, offerPrice: 2.50 },

Then, format the prices when rendering:

- <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p>
- <p className="text-xl font-bold text-red-500">{todaysSpecial.coffee.offerPrice}</p>
+ <p className="text-lg font-bold text-red-700 line-through">${todaysSpecial.coffee.originalPrice.toFixed(2)}</p>
+ <p className="text-xl font-bold text-red-500">${todaysSpecial.coffee.offerPrice.toFixed(2)}</p>

Apply similar changes for the food and drink items to ensure consistency.

Committable suggestion was skipped due to low confidence.

],
};

const TodaysSpecial = () => {
const [todaysSpecial, setTodaysSpecial] = useState({ coffee: {}, drink: {}, food: {} });
const [hoveredItem, setHoveredItem] = useState(null); // State to track the hovered item

// Function to update today's special (cycling through 3 items)
const updateTodaysSpecial = () => {
Expand All @@ -51,20 +52,61 @@ const TodaysSpecial = () => {
<div className="mt-10">
<h2 className="text-5xl font-bold text-center mb-9">Today's Special</h2>
<div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4">
<div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">
{/* Coffee Card */}
<div
className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
style={{ minHeight: '300px' }} // Ensure a minimum height for the card
onMouseEnter={() => setHoveredItem('coffee')}
onMouseLeave={() => setHoveredItem(null)}
>
<img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
<h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
<p className="text-gray-600">{todaysSpecial.coffee.description}</p>
{/* Show prices below the image and description */}
{hoveredItem === 'coffee' && (
<div className="mt-4">
<p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p>
<p className="text-xl font-bold text-red-500">{todaysSpecial.coffee.offerPrice}</p>
</div>
)}
Comment on lines +55 to +71
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Refactor repeated card components into a reusable component

The code for the Coffee Card, Food Card, and Drink Card is largely similar, with differences only in data and styling classes. To adhere to the DRY (Don't Repeat Yourself) principle and improve maintainability, consider creating a reusable MenuItemCard component.

Create a new component MenuItemCard:

const MenuItemCard = ({ item, backgroundClass, itemKey, hoveredItem, setHoveredItem }) => (
  <div
    className={`${backgroundClass} p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2`}
    style={{ minHeight: '300px' }}
    onMouseEnter={() => setHoveredItem(itemKey)}
    onMouseLeave={() => setHoveredItem(null)}
  >
    <img
      className="w-64 h-48 object-cover object-center rounded-md mb-4"
      src={item.image}
      alt={item.name}
    />
    <h3 className="text-xl font-semibold">{item.name}</h3>
    <p className="text-gray-600">{item.description}</p>
    {hoveredItem === itemKey && (
      <div className="mt-4">
        <p className="text-lg font-bold text-red-700 line-through">
          ${item.originalPrice.toFixed(2)}
        </p>
        <p className="text-xl font-bold text-red-500">
          ${item.offerPrice.toFixed(2)}
        </p>
      </div>
    )}
  </div>
);

Then, use this component in your TodaysSpecial component:

<div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4">
  <MenuItemCard
    item={todaysSpecial.coffee}
    backgroundClass="bg-pink-100"
    itemKey="coffee"
    hoveredItem={hoveredItem}
    setHoveredItem={setHoveredItem}
  />
  <MenuItemCard
    item={todaysSpecial.food}
    backgroundClass="bg-teal-100"
    itemKey="food"
    hoveredItem={hoveredItem}
    setHoveredItem={setHoveredItem}
  />
  <MenuItemCard
    item={todaysSpecial.drink}
    backgroundClass="bg-pink-100"
    itemKey="drink"
    hoveredItem={hoveredItem}
    setHoveredItem={setHoveredItem}
  />
</div>

This refactoring reduces code duplication and makes future updates easier.

Also applies to: 75-90, 94-109

Comment on lines +65 to +71
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Ensure price information is accessible on touch devices

Currently, the price information is displayed on hover using onMouseEnter and onMouseLeave events. On touch devices, users cannot hover over elements, which means they won't see the pricing information.

Consider making the price information always visible or implementing a touch-friendly interaction, such as displaying the prices on tap or by default. This will improve accessibility and ensure all users can view the pricing regardless of their device.

For example, you could modify the condition to check for touch devices:

const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

{(hoveredItem === itemKey || isTouchDevice) && (
  /* Price information */
)}

Or simplify by always showing the prices.

Also applies to: 84-90, 103-109

</div>
<div className="card bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center">

{/* Food Card */}
<div
className="bg-teal-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
style={{ minHeight: '300px' }} // Ensure a minimum height for the card
onMouseEnter={() => setHoveredItem('food')}
onMouseLeave={() => setHoveredItem(null)}
>
<img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} />
<h3 className="text-xl font-semibold">{todaysSpecial.food.name}</h3>
<p className="text-gray-600">{todaysSpecial.food.description}</p>
{/* Show prices below the image and description */}
{hoveredItem === 'food' && (
<div className="mt-4">
<p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.food.originalPrice}</p>
<p className="text-xl font-bold text-red-500">{todaysSpecial.food.offerPrice}</p>
</div>
)}
</div>
<div className="card bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center">

{/* Drink Card */}
<div
className="bg-pink-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"
style={{ minHeight: '300px' }} // Ensure a minimum height for the card
onMouseEnter={() => setHoveredItem('drink')}
onMouseLeave={() => setHoveredItem(null)}
>
<img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} />
<h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
<p className="text-gray-600">{todaysSpecial.drink.description}</p>
{/* Show prices below the image and description */}
{hoveredItem === 'drink' && (
<div className="mt-4">
<p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.drink.originalPrice}</p>
<p className="text-xl font-bold text-red-500">{todaysSpecial.drink.offerPrice}</p>
</div>
)}
</div>
</div>
</div>
Expand Down