Skip to content

Commit

Permalink
Merge pull request #20 from canopas/deploy-website-using-s3
Browse files Browse the repository at this point in the history 
Refactor UI
  • Loading branch information
@cp-dharti-r
cp-dharti-r authored May 27, 2024
2 parents 95f6fad + 8f96a8d commit 7e9bffa
Show file tree
Hide file tree
Showing 18 changed files with 461 additions and 293 deletions.
52 changes: 52 additions & 0 deletions website/components/BottomSheet/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Reels from "@/components/Reel";
import { useEffect } from "react";

const BottomSheet = ({
isOpen,
onClose,
name,
items,
}: {
isOpen: boolean;
onClose: any;
name: string;
items: any;
}) => {
useEffect(() => {
if (isOpen) {
document.body.classList.add("overflow-hidden");
} else {
document.body.classList.remove("overflow-hidden");
}

return () => {
document.body.classList.remove("overflow-hidden");
};
}, [isOpen]);

return (
<div
className={`fixed inset-0 z-[100] flex items-end ${
isOpen ? "block" : "hidden"
}`}
>
<div className="fixed inset-0" onClick={onClose}></div>
<header className="select-none header left-0 top-0 z-40 w-full items-center absolute p-3 flex gap-2 text-white">
<button
onClick={onClose}
className="flex gap-2 items-center bg-primary bg-opacity-50 dark:bg-opacity-30 border-b border-primary dark:border-opacity-50 px-3 py-1 text-sm font-semibold rounded-lg"
>
<span>{"<"}</span>
Back
</button>
<span>|</span>
<p className="font-bold text-sm">{name} dishes</p>
</header>
<div className="h-full w-full bg-white dark:bg-black">
<Reels dishesData={items} isDishesLoading={false} />
</div>
</div>
);
};

export default BottomSheet;
41 changes: 41 additions & 0 deletions website/components/FoodCategory/SingleItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { ItemProps } from "@/types/card-item";
import Image from "next/image";

const SingleItem = ({ item }: { item: ItemProps }) => {
const { name, description, image, video } =
item;
return (
<>
<div
className="wow fadeInUp relative flex h-full flex-col overflow-hidden rounded-xl bg-gradient-to-r from-white to-black shadow-one bg-cover"
style={{ backgroundImage: `url(${image})` }}
data-wow-delay=".1s"
>
<div className="relative block h-[25rem] w-full">
<Image
src={image}
alt="item-image"
className="h-full w-full object-cover"
height={100}
width={100}
loading="lazy"
/>
</div>
<div
className={`flex-auto bg-black bg-opacity-70 p-5 ${
video ? "z-[1]" : ""
}`}
>
<div className="text-gray-200 dark:text-gray-300 text-center">
<p className="text-white mb-3 text-lg font-bold border-b border-gray-300 border-opacity-20">
{name}
</p>
<p className="text-xs">{description}</p>
</div>
</div>
</div>
</>
);
};

export default SingleItem;
185 changes: 37 additions & 148 deletions website/components/FoodCategory/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

import supabase from "@/utils/supabase";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";

import SectionTitle from "../Common/SectionTitle";
import { InView } from "react-intersection-observer";

import "swiper/css";
import "swiper/css/navigation";

import SectionTitle from "../Common/SectionTitle";
import CategorySwiperSkeleton from "../SkeletonPlaceholders/CategorySwiper";
import SingleItem from "./SingleItem";

import { useAppDispatch, useAppSelector } from "@/store/store";
import { setCategoriesState } from "@/store/home/slice";
import { getFoodCategories } from "@/store/category/slice";

const FoodCategory = ({ categories }: { categories: any }) => {
const dispatch = useAppDispatch();
const categoriesState = useAppSelector((state) => state.home.categories);
const isPageReset = useAppSelector((state) => state.app.isPageReset);

const [isCategoriesLoading, setIsCategoriesLoading] = useState(
categories ? false : true
Expand Down Expand Up @@ -55,7 +54,7 @@ const FoodCategory = ({ categories }: { categories: any }) => {
return (
<>
<section className="py-16 md:py-20 lg:py-28">
<div className="container animated-fade">
<div className="container animated-fade mb-20">
<SectionTitle
title="What's on your mind?"
paragraph="We believe in the power of expression – so go ahead, let your thoughts flow."
Expand All @@ -66,149 +65,39 @@ const FoodCategory = ({ categories }: { categories: any }) => {
<CategorySwiperSkeleton />
) : (
<>
<Swiper
modules={[Navigation, Autoplay]}
slidesPerView={4}
loop={true}
autoplay={true}
navigation
className="food-category-swiper !hidden h-[27rem] lg:!block"
>
{categoriesData.map((item: any, index: any) => (
<SwiperSlide key={"lg-category-index-" + index}>
<Link
href={
"/category/" +
encodeURIComponent(
item.name.toLowerCase().replace(/\s+/g, "-")
) +
"-" +
btoa(item.id.toString())
}
className="flex h-80 w-full cursor-pointer flex-col gap-2 items-center"
>
<Image
src={item.image}
height={100}
width={300}
className="h-[16rem] w-[15rem] rounded-2xl object-cover"
alt="item-image"
/>
<p className="text-center text-lg font-black">
{item.name}
</p>
</Link>
</SwiperSlide>
))}
</Swiper>

<Swiper
modules={[Navigation, Autoplay]}
slidesPerView={3}
loop={true}
autoplay={true}
navigation
className="food-category-swiper !hidden h-[27rem] md:!block lg:!hidden"
>
{categoriesData.map((item: any, index: any) => (
<SwiperSlide key={"md-category-index-" + index}>
<Link
href={
"/category/" +
encodeURIComponent(
item.name.toLowerCase().replace(/\s+/g, "-")
) +
"-" +
btoa(item.id.toString())
}
className="flex h-80 w-full cursor-pointer flex-col gap-2 items-center"
>
<Image
src={item.image}
height={100}
width={100}
className="h-[16rem] w-[15rem] rounded-2xl object-cover"
alt="item-image"
/>
<p className="text-center text-lg font-black">
{item.name}
</p>
</Link>
</SwiperSlide>
))}
</Swiper>

<Swiper
modules={[Navigation, Autoplay]}
slidesPerView={2}
loop={true}
autoplay={true}
navigation
className="food-category-swiper !hidden h-[27rem] sm:!block md:!hidden"
>
{categoriesData.map((item: any, index: any) => (
<SwiperSlide key={"sm-category-index-" + index}>
<Link
href={
"/category/" +
encodeURIComponent(
item.name.toLowerCase().replace(/\s+/g, "-")
) +
"-" +
btoa(item.id.toString())
}
className="flex h-72 w-full cursor-pointer flex-col items-center"
>
<Image
src={item.image}
height={100}
width={100}
className="h-[16rem] w-64 rounded-2xl object-cover"
alt="item-image"
/>
<p className="text-center text-lg font-black">
{item.name}
</p>
</Link>
</SwiperSlide>
))}
</Swiper>

<Swiper
modules={[Navigation, Autoplay]}
slidesPerView={1}
loop={true}
autoplay={true}
navigation
className="food-category-swiper h-[27rem] sm:!hidden"
>
<div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 md:gap-x-6 lg:gap-x-8 xl:grid-cols-3">
{categoriesData.map((item: any, index: any) => (
<SwiperSlide key={"xs-category-index-" + index}>
<Link
href={
"/category/" +
encodeURIComponent(
item.name.toLowerCase().replace(/\s+/g, "-")
) +
"-" +
btoa(item.id.toString())
}
className="flex items-center h-80 w-full cursor-pointer flex-col"
<div key={"item-card-" + index}>
<InView
triggerOnce
className={`${!isPageReset ? "animated-fade-y" : ""}`}
>
<Image
src={item.image}
height={100}
width={100}
className="h-72 w-80 rounded-2xl object-cover"
alt="item-image"
/>
<p className="text-center text-lg font-black">
{item.name}
</p>
</Link>
</SwiperSlide>
{({ inView, ref, entry }) => (
<Link
ref={ref}
href={
"/category/" +
encodeURIComponent(
item.name.toLowerCase().replace(/\s+/g, "-")
) +
"-" +
btoa(item.id.toString())
}
className={`h-full w-full ${
inView
? !isPageReset
? "animated-fade-y"
: ""
: ""
}`}
>
<SingleItem item={item} />
</Link>
)}
</InView>
</div>
))}
</Swiper>
</div>
</>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion website/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const Header = ({ manageColor }: { manageColor: boolean }) => {
<header
className={`header left-0 top-0 z-40 flex w-full items-center ${
sticky
? "!fixed !z-[9999] !bg-white !bg-opacity-80 shadow-sticky backdrop-blur-xl !transition dark:!bg-black dark:!bg-opacity-20"
? "!fixed !z-[100] !bg-white !bg-opacity-80 shadow-sticky backdrop-blur-xl !transition dark:!bg-black dark:!bg-opacity-20"
: "absolute"
}`}
>
Expand Down
26 changes: 2 additions & 24 deletions website/components/Hero/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
"use client";

import Image from "next/image";

import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import { useEffect, useState } from "react";

const banners = [
{
Expand Down Expand Up @@ -72,26 +69,10 @@ const banners = [
];

const Hero = () => {
const [screenHeight, setScreenHeight] = useState<number>(0);

useEffect(() => {
setScreenHeight(window.innerHeight);

window.addEventListener("resize", () =>
setScreenHeight(window.innerHeight)
);
return () =>
window.removeEventListener("resize", () =>
setScreenHeight(window.innerHeight)
);
}, []);

return (
<>
<div className="relative z-10 overflow-hidden">
<div
style={{ height: screenHeight != 0 ? screenHeight + "px" : "100vh" }}
>
<div className="h-screen">
<Swiper
modules={[Autoplay]}
slidesPerView={1}
Expand All @@ -114,10 +95,7 @@ const Hero = () => {
</div>
</div>
<div className="w-full">
<div
className="absolute top-0 z-10 w-full bg-black bg-opacity-60"
style={{ height: screenHeight != 0 ? screenHeight + "px" : "100vh" }}
>
<div className="h-screen absolute top-0 z-10 w-full bg-black bg-opacity-60">
<div className="flex h-full select-none flex-col capitalize text-white gap-5">
<div className="flex flex-col xs:flex-row h-1/2 items-center justify-end xs:items-end xs:justify-center font-extrabold text-3xl md:text-5xl xl:text-7xl">
Elevate your{" "}
Expand Down
Loading

0 comments on commit 7e9bffa

Please sign in to comment.