diff --git a/public/assets/images/food-preview.png b/public/assets/images/food-preview.png new file mode 100644 index 0000000..69657de Binary files /dev/null and b/public/assets/images/food-preview.png differ diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx index 9960e81..580464b 100644 --- a/src/app/menu/page.tsx +++ b/src/app/menu/page.tsx @@ -1,10 +1,16 @@ 'use client'; -import { useCallback, useState } from "react"; +import { Fragment, useCallback, useState } from "react"; import SearchBox from "@/components/input/SearchBox"; import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer"; import HorizontalScrollView from "@/components/listview/HorizontalScrollView"; import Image from "next/image"; +import EqualizerIcon from "@/components/icons/EqualizerIcon"; +import TextAlignIcon from "@/components/icons/TextAlignIcon"; +import PlusIcon from "@/components/icons/PlusIcon"; +import MinusIcon from "@/components/icons/MinusIcon"; +import VerticalScrollView from "@/components/listview/VerticalScrollView"; +import MenuItemRenderer from "@/components/listview/MenuItemRenderer"; const categories = [ { @@ -48,6 +54,93 @@ const categories = [ } ] +const foods = [ + { + category: 0, + price: '69.000', + name: 'کباب چوبی ژیوان )سیخ چوبی(', + contains: 'فیله گوساله / سس سفید / قارچ و سیب زمینی/ پنیر پارمزان' + }, + { + category: 1, + price: '49.000', + name: 'برگر گوشت گوساله', + contains: 'گوشت گوساله / پنیر چدار / کاهو / گوجه' + }, + { + category: 2, + price: '29.000', + name: 'ساندویچ مرغ', + contains: 'مرغ / کاهو / گوجه / سس مایونز' + }, + { + category: 0, + price: '89.000', + name: 'کباب ماهی', + contains: 'ماهی / سس لیمو / قارچ و سیب زمینی' + }, + { + category: 1, + price: '39.000', + name: 'سالاد فصل', + contains: 'کاهو / گوجه / خیار / پنیر فتا' + }, + { + category: 3, + price: '59.000', + name: 'پاستا گوشت', + contains: 'گوشت گوساله / پاستا / سس گوجه' + }, + { + category: 2, + price: '49.000', + name: 'ساندویچ تن ماهی', + contains: 'تن ماهی / کاهو / گوجه / سس مایونز' + }, + { + category: 0, + price: '79.000', + name: 'کباب گوشت گوسفندی', + contains: 'گوشت گوسفندی / سس سفید / قارچ و سیب زمینی' + }, + { + category: 1, + price: '29.000', + name: 'برگر مرغ', + contains: 'مرغ / پنیر چدار / کاهو / گوجه' + }, + { + category: 3, + price: '69.000', + name: 'سالاد میگو', + contains: 'میگو / کاهو / گوجه / خیار' + }, + { + category: 2, + price: '39.000', + name: 'ساندویچ شاورما', + contains: 'مرغ / کاهو / گوجه / سس تارتار' + }, + { + category: 0, + price: '99.000', + name: 'کباب گوشت بوقلمون', + contains: 'گوشت بوقلمون / سس سفید / قارچ و سیب زمینی' + }, + { + category: 1, + price: '59.000', + name: 'برگر ماهی', + contains: 'ماهی / پنیر چدار / کاهو / گوجه' + }, + { + category: 3, + price: '49.000', + name: 'سالاد مرغ', + contains: 'مرغ / کاهو / گوجه / خیار' + }, +]; + export default function MenuIndex() { const [search, setSearch] = useState(''); const [selectedCategory, setSelectedCategory] = useState(0); @@ -64,24 +157,82 @@ export default function MenuIndex() { return (
- { - return updateCategory(index)} key={index}>{child} + { + return updateCategory(index)} key={index}>{child} }}> {categories.map((item, index) => { return (
- category image + /> {item.title}
) })} + +
+
+ {categories[selectedCategory].title} +
+ + +
+
+ + { + return ( + {child} + ) + }} + > + {foods.map((food, index) => { + return ( + + Food image +
+
+
{food.name}
+
{food.contains}
+
+
+ {food.price} T +
+ {/* +
افزودن
*/} + + +
2
+ +
+
+
+ + ) + })} + + + + +
); } diff --git a/src/components/icons/EqualizerIcon.tsx b/src/components/icons/EqualizerIcon.tsx new file mode 100644 index 0000000..69dd371 --- /dev/null +++ b/src/components/icons/EqualizerIcon.tsx @@ -0,0 +1,77 @@ +import React from 'react'; + +interface EqualizerIconProps { + className?: string; + stroke?: string; + strokeWidth?: number; + size?: number; +} + +const EqualizerIcon: React.FC = ({ + className = '', + stroke = '#333333', + strokeWidth = 1.5, + size = 16, +}) => { + return ( + + + + + + + + + ); +}; + +export default EqualizerIcon; diff --git a/src/components/icons/MinusIcon.tsx b/src/components/icons/MinusIcon.tsx new file mode 100644 index 0000000..51310b0 --- /dev/null +++ b/src/components/icons/MinusIcon.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +interface MinusIconProps { + className?: string; + stroke?: string; + strokeWidth?: number; + size?: number; +} + +const MinusIcon: React.FC = ({ + className = '', + stroke = '#333333', + strokeWidth = 1.5, + size = 10, +}) => { + return ( + + + + ); +}; + +export default MinusIcon; diff --git a/src/components/icons/PlusIcon.tsx b/src/components/icons/PlusIcon.tsx new file mode 100644 index 0000000..828300d --- /dev/null +++ b/src/components/icons/PlusIcon.tsx @@ -0,0 +1,41 @@ +import React from 'react'; + +interface PlusIconProps { + className?: string; + stroke?: string; + strokeWidth?: number; + size?: number; +} + +const PlusIcon: React.FC = ({ + className = '', + stroke = '#333333', + strokeWidth = 1.5, + size = 10, +}) => { + return ( + + + + + ); +}; + +export default PlusIcon; diff --git a/src/components/icons/TextAlignIcon.tsx b/src/components/icons/TextAlignIcon.tsx new file mode 100644 index 0000000..264014b --- /dev/null +++ b/src/components/icons/TextAlignIcon.tsx @@ -0,0 +1,66 @@ +import React from 'react'; + +interface TextAlignIconProps { + className?: string; + stroke?: string; + strokeWidth?: number; + size?: number; +} + +const TextAlignIcon: React.FC = ({ + className = '', + stroke = '#333333', + strokeWidth = 1.5, + size = 20, +}) => { + return ( + + + + + + + + ); +}; + +export default TextAlignIcon; diff --git a/src/components/listview/MenuItemRenderer.tsx b/src/components/listview/MenuItemRenderer.tsx new file mode 100644 index 0000000..670c229 --- /dev/null +++ b/src/components/listview/MenuItemRenderer.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +type Props = { + children: React.ReactNode; +} & React.HTMLAttributes; + +function MenuItemRenderer({ children, ...rest }: Props) { + return ( +
+ {children} +
+ ); +} + +export default MenuItemRenderer; diff --git a/src/components/listview/VerticalScrollView.tsx b/src/components/listview/VerticalScrollView.tsx new file mode 100644 index 0000000..1945095 --- /dev/null +++ b/src/components/listview/VerticalScrollView.tsx @@ -0,0 +1,34 @@ +import React, { ReactElement, ReactNode } from 'react'; + +type Props = { + itemRenderer?: (child: ReactNode, index: number) => ReactElement; + children: ReactNode; +} & React.OlHTMLAttributes; + +function VerticalScrollView({ itemRenderer, children, ...restProps }: Props) { + const items = React.Children.toArray(children); + + return ( +
    + {items.map((child, index) => ( +
  • + {itemRenderer ? itemRenderer(child, index) : child} +
    • + ))} +
+ ); +} + +export default VerticalScrollView; diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 3e6ece3..ede4452 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -75,32 +75,34 @@ function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState const menuStateMemo = useMemo(() => menuState, [menuState]); return ( - -
-
{ e.stopPropagation(); }} - className={`absolute top-0 -right-full data-[isvisible=true]:right-0 transition-all duration-300 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-full flex flex-col z-40`}> -
    -
  • -
    -
    -
    منو
    - {menuItems[0].map((v, i) => { - return - })} +
    + +
    +
    { e.stopPropagation(); }} + className={`fixed top-0 bottom-0 -right-full data-[isvisible=true]:right-0 transition-all duration-100 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-dvh flex flex-col z-40`}> +
      +
    • +
      +
      +
      منو
      + {menuItems[0].map((v, i) => { + return + })} +
      -
    -
    • -
  • - {menuItems[2].map((v, i) => { - return - })} - }> -
    • -
-
- + +
  • + {menuItems[2].map((v, i) => { + return + })} + }> +
    • + + + + ) } diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx index fbf74ef..5df9806 100644 --- a/src/components/navigation/BottomNavBar.tsx +++ b/src/components/navigation/BottomNavBar.tsx @@ -11,7 +11,7 @@ type Props = object function BottomNavBar({ }: Props) { return ( -
    +
    +