Skip to content

Commit

Permalink
fix: UI enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamtrazy
iamtrazy committed Dec 3, 2024
1 parent 3176946 commit 31d7314
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 66 deletions.
124 changes: 61 additions & 63 deletions src/components/User/Discount/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,77 @@
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import TextButton from './TextButton';
import { useDiscount } from '@/api/useDiscount';
import { Discount } from '@/types/discount';
import { useQuery } from '@tanstack/react-query';
import { useFoods } from '@/api/useFoodItem';
import { useCombos } from '@/api/useFoodCombo';
import { Food } from '@/types/food';
import { FoodCombo } from '@/types/combo';
import Item from '../AllMenuItems/ItemList';

function index() {
const { getAllDiscounts } = useDiscount();
const [discount, setDiscount] = useState<Discount[]>([]);
const { getAllFoods } = useFoods();
const { getAllCombos } = useCombos();

const fetchDiscount = async () => {
try {
const data = await getAllDiscounts();
setDiscount(data);
} catch (error: any) {
console.error(error);
}
};
const foodQuery = useQuery({
queryKey: ['foods'],
queryFn: getAllFoods,
});

useEffect(() => {
fetchDiscount();
}, []);
const comboQuery = useQuery({
queryKey: ['combos'],
queryFn: getAllCombos,
});

if (foodQuery.isLoading || comboQuery.isLoading) {
return <div>Loading...</div>;
}

if (foodQuery.isError || comboQuery.isError) {
return <div>Error loading items</div>;
}

const foods: Food[] = foodQuery.data.filter(
(food: Food) => food.discountStatus,
);
const combos: FoodCombo[] = comboQuery.data.filter(
(combo: FoodCombo) => combo.discountStatus,
);

return (
<div>
<div className="text-4xl text-foodbg dark:text-white mx-auto max-w-screen-xl px-4 2xl:px-0">
<b>Promotions</b>
</div>
<div className="mt-2 mx-auto max-w-screen-xl px-4 2xl:px-0">
Enjoy great savings with exclusive deals and offers available on your favorite items.
Enjoy great savings with exclusive deals and offers available on your
favorite items.
</div>

<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 mx-auto max-w-screen-xl mt-10">
{discount.map((item: any) => {
return (
<Link
to={`/menuItems/${item[0].menuItemType === "Food Item" ? "viewfooditem" : "viewfoodcombo"}/${item[0].menuItemId}`}
className="hover:scale-105 transition-transform duration-300 hover:cursor-pointer"
>
<div
className="dark:border rounded-2xl border-foodbg bg-foodbg backdrop-blur-md xl:w-[500px] lg:w-[450px] h-[280px] p-2 py-2 mx-[10%] mb-10 overflow-hidden"
style={{
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.12)',
backgroundColor: 'rgba(255, 255, 255, 0.01)',
}}
>
{item[0].limited === 1 && (
<div className="absolute p-2 w-[120px] h-2 rotate-[135deg] bg-gradient-to-r from-red-600 to-red-800 translate-x-[-35px] translate-y-[20px]">
<p className="rotate-180 text-xs translate-y-[-7.5px] translate-x-[-15px] text-white">
LIMITED TIME
</p>
</div>
)}

<div className="h-50 bg-green rounded-xl">
<img src={item[0].image} alt="" className="w-[100%]" />
</div>

<div className="flex justify-between px-3 mt-2">
<div className="">
<p>
<b className="dark:text-white text-foodbg text-xl">
{item[0].name}
</b>
</p>
<p>{item[0].branch}</p>
</div>

<div className="pt-[7px] pb-[3px]">
<TextButton value="Buy Now" />
</div>
</div>
</div>
</Link>
);
})}
<div className="mx-auto max-w-screen-xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-5 mt-10">
{foods.map((food: Food) => (
<Item
key={food.id}
id={food.id}
name={food.name}
rating={food.rating}
price={food.price}
image={food.image}
categories={food.categories}
discountStatus={food.discountStatus}
available={food.available}
type={'fooditem'}
/>
))}
{combos.map((combo: FoodCombo) => (
<Item
key={combo.id}
id={combo.id}
name={combo.name}
rating={combo.rating}
price={combo.price}
image={combo.image}
discountStatus={combo.discountStatus}
available={combo.available}
type={'foodcombo'}
/>
))}
</div>
</div>
);
Expand Down
27 changes: 24 additions & 3 deletions src/components/User/FoodCombo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function FoodComboForm({ id }: Props) {
const [combo, setFoodCombo] = useState<FoodCombo>();
const [price, setPrice] = useState<number>(1);
const [additionalPrices, setAdditionalPrices] = useState<number>(0);
const [currentRating, setCurrentRating] = useState<number>(4);

const {
handleSubmit,
Expand Down Expand Up @@ -115,6 +116,11 @@ function FoodComboForm({ id }: Props) {
setAdditionalPrices((prev) => prev + priceDelta);
};

const handleStarClick = (starIndex: number) => {
setCurrentRating(starIndex + 1);
showSwal();
};

if (!combo) {
return <div>Loading...</div>;
}
Expand All @@ -123,8 +129,17 @@ function FoodComboForm({ id }: Props) {

return (
<div className="flex items-center h-110vh lg:h-[calc(100vh-120px)]">
<Button
className="bg-gradient-to-r from-orange-600 to-orange-400 text-white
shadow-lg rounded-full min-w-[50px] h-[50px] absolute left-[8%] top-[120px] z-10
hover:opacity-90 transition-all text-2xl flex items-center justify-center p-0"
onClick={() => navigate(-1)}
>
&#8249;
</Button>

<div
className="ml-[10%] flex flex-col lg:flex-row flex-grow items-center justify-between px-4 py-4 rounded-2xl border border-combobg bg-combobg backdrop-blur-md h-[calc(100vh - 20px)]"
className="ml-[10%] flex flex-col lg:flex-row flex-grow items-center justify-between px-4 py-4 rounded-2xl border border-foodbg bg-foodbg backdrop-blur-md h-[calc(100vh - 20px)]"
style={{
marginLeft: '10%',
marginRight: '10%',
Expand All @@ -143,9 +158,15 @@ function FoodComboForm({ id }: Props) {
<div className="text-4xl font-bold text-white">{combo.name}</div>
<div className="pt-3">{combo.description}</div>

<div className="flex items-center pt-3">
<div className="flex items-center pt-3 gap-2">
{Array.from({ length: 5 }).map((_, i) => (
<Star key={`star-${i}`} highlight={i !== 4} />
<div
key={`star-${i}`}
className="cursor-pointer transform scale-150 hover:scale-[1.6] transition-transform"
onClick={() => handleStarClick(i)}
>
<Star highlight={i <= currentRating - 1} />
</div>
))}
</div>

Expand Down

0 comments on commit 31d7314

Please sign in to comment.