list of foods and categories
This commit is contained in:
hamid zarghami
@@ -0,0 +1,96 @@
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import clsx from "clsx";
|
||||
import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
|
||||
import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
|
||||
import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
|
||||
import { Category } from "@/app/[name]/(Main)/types/Types";
|
||||
|
||||
type Variant = "large" | "small";
|
||||
|
||||
const variantConfig: Record<
|
||||
Variant,
|
||||
{
|
||||
renderer: typeof CategoryItemRenderer;
|
||||
imageSize: number;
|
||||
}
|
||||
> = {
|
||||
large: {
|
||||
renderer: CategoryItemRenderer,
|
||||
imageSize: 32,
|
||||
},
|
||||
small: {
|
||||
renderer: CategorySmallItemRenderer,
|
||||
imageSize: 24,
|
||||
},
|
||||
};
|
||||
|
||||
type Props = {
|
||||
categories: Category[];
|
||||
selectedCategory: string;
|
||||
onSelect: (index: number) => void;
|
||||
variant?: Variant;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const CategoryScroll = ({
|
||||
categories,
|
||||
selectedCategory,
|
||||
onSelect,
|
||||
variant = "large",
|
||||
className,
|
||||
}: Props) => {
|
||||
const { renderer: Renderer, imageSize } = variantConfig[variant];
|
||||
|
||||
const handleSelect = (index: number) => () => onSelect(index);
|
||||
|
||||
return (
|
||||
<HorizontalScrollView
|
||||
className={clsx(
|
||||
"w-full noscrollbar py-4!",
|
||||
variant === "large" && "mt-4!",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Renderer
|
||||
key="all"
|
||||
className={clsx(selectedCategory === "0" && "bg-container!")}
|
||||
onClick={handleSelect(0)}
|
||||
>
|
||||
<Image
|
||||
priority
|
||||
src="/assets/images/food-image.png"
|
||||
width={imageSize}
|
||||
height={imageSize}
|
||||
alt="category image"
|
||||
/>
|
||||
<span className="text-xs text-foreground">همه</span>
|
||||
</Renderer>
|
||||
{categories.map((item, index) => {
|
||||
const categoryIndex = index + 1;
|
||||
const isSelected = String(categoryIndex) === selectedCategory;
|
||||
|
||||
return (
|
||||
<Renderer
|
||||
key={item.id}
|
||||
className={clsx(isSelected && "bg-container!")}
|
||||
onClick={handleSelect(categoryIndex)}
|
||||
>
|
||||
<Image
|
||||
priority
|
||||
src={item.avatarUrl || "/assets/images/food-image.png"}
|
||||
width={imageSize}
|
||||
height={imageSize}
|
||||
alt="category image"
|
||||
/>
|
||||
<span className="text-xs text-foreground">{item.title}</span>
|
||||
</Renderer>
|
||||
);
|
||||
})}
|
||||
</HorizontalScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryScroll;
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
'use client';
|
||||
|
||||
import React from "react";
|
||||
import Button from "@/components/button/PrimaryButton";
|
||||
import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
|
||||
import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { MedalStar } from "iconsax-react";
|
||||
import { TicketPercentIcon } from "lucide-react";
|
||||
|
||||
type MenuFilterDrawerProps = {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
selectedIngredients: string;
|
||||
selectedDeliveryId: string;
|
||||
onIngredientsChange: (value: string) => void;
|
||||
onDeliveryChange: (value: string) => void;
|
||||
tMenu: (key: string) => string;
|
||||
};
|
||||
|
||||
const MenuFilterDrawer = ({
|
||||
visible,
|
||||
onClose,
|
||||
selectedIngredients,
|
||||
selectedDeliveryId,
|
||||
onIngredientsChange,
|
||||
onDeliveryChange,
|
||||
tMenu,
|
||||
}: MenuFilterDrawerProps) => {
|
||||
const contents: Array<ComboboxOption> = [
|
||||
{
|
||||
id: "0",
|
||||
title: tMenu("MenuFilterDrawer.SelectContent.Options.Normal"),
|
||||
label: "",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
title: tMenu("MenuFilterDrawer.SelectContent.Options.Vegan"),
|
||||
label: "",
|
||||
},
|
||||
];
|
||||
|
||||
const shippings: Array<ComboboxOption> = [
|
||||
{
|
||||
id: "0",
|
||||
title: tMenu("MenuFilterDrawer.SelectDelivery.Options.Courier"),
|
||||
label: "",
|
||||
},
|
||||
];
|
||||
|
||||
const handleIngredientsChange = (
|
||||
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
||||
index: number
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
onIngredientsChange(contents[index]?.id ?? contents[0].id);
|
||||
};
|
||||
|
||||
const handleDeliveryChange = (
|
||||
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
||||
index: number
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
onDeliveryChange(shippings[index]?.id ?? shippings[0].id);
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatedBottomSheet
|
||||
title={tMenu("MenuFilterDrawer.Heading")}
|
||||
visible={visible}
|
||||
outDelay={150}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="ps-8.5 pe-[31px] mt-[89px]">
|
||||
<ComboBox
|
||||
title={tMenu("MenuFilterDrawer.SelectContent.Label")}
|
||||
options={contents}
|
||||
selectedId={selectedIngredients}
|
||||
onSelectionChange={handleIngredientsChange}
|
||||
/>
|
||||
<ComboBox
|
||||
className="relative mt-9.5"
|
||||
title={tMenu("MenuFilterDrawer.SelectDelivery.Label")}
|
||||
options={shippings}
|
||||
selectedId={selectedDeliveryId}
|
||||
onSelectionChange={handleDeliveryChange}
|
||||
/>
|
||||
<div className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black">
|
||||
<span className="inline-flex items-center gap-2.5 text-sm2">
|
||||
<MedalStar size="16" className="stroke-foreground" />
|
||||
{tMenu("MenuFilterDrawer.PlusPoint")}
|
||||
</span>
|
||||
<Switch className="w-12 h-6" />
|
||||
</div>
|
||||
<div className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border cursor-pointer focus:outline-none focus:ring-2 focus:ring-black">
|
||||
<span className="inline-flex items-center gap-2.5 text-sm2">
|
||||
<TicketPercentIcon size={16} />
|
||||
{tMenu("MenuFilterDrawer.DiscountState")}
|
||||
</span>
|
||||
<Switch />
|
||||
</div>
|
||||
</div>
|
||||
<hr className="text-white/40 mt-12" />
|
||||
<div className="px-9 pt-6 flex justify-between gap-[22px]">
|
||||
<div className="w-full">
|
||||
<Button>{tMenu("MenuFilterDrawer.ButtonOk")}</Button>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<Button className="bg-disabled! text-disabled-text!">
|
||||
{tMenu("MenuFilterDrawer.ButtonCancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedBottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuFilterDrawer;
|
||||
@@ -0,0 +1,48 @@
|
||||
'use client';
|
||||
|
||||
import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
|
||||
import React from "react";
|
||||
|
||||
type MenuSortingDrawerProps = {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
sortings: string[];
|
||||
onSelect: (index: number) => void;
|
||||
tMenu: (key: string) => string;
|
||||
};
|
||||
|
||||
const MenuSortingDrawer = ({
|
||||
visible,
|
||||
onClose,
|
||||
sortings,
|
||||
onSelect,
|
||||
tMenu,
|
||||
}: MenuSortingDrawerProps) => {
|
||||
return (
|
||||
<AnimatedBottomSheet
|
||||
title={tMenu("MenuSortingDrawer.Heading")}
|
||||
visible={visible}
|
||||
inDelay={150}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="px-8.5 py-10 justify-between">
|
||||
{sortings.map((value, index) => (
|
||||
<div key={value}>
|
||||
<div
|
||||
onClick={() => onSelect(index)}
|
||||
className="text-sm2 font-normal cursor-pointer"
|
||||
>
|
||||
{tMenu(`MenuSortingDrawer.Options.${value}`)}
|
||||
</div>
|
||||
{index < sortings.length - 1 && (
|
||||
<hr className="border-white/40 dark:border-border mb-4 mt-4" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</AnimatedBottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuSortingDrawer;
|
||||
|
||||
Reference in New Issue
Block a user