diff --git a/src/app/menu/layout.tsx b/src/app/[name]/layout.tsx similarity index 100% rename from src/app/menu/layout.tsx rename to src/app/[name]/layout.tsx diff --git a/src/app/[name]/orders/layout.tsx b/src/app/[name]/orders/layout.tsx new file mode 100644 index 0000000..b1c3f62 --- /dev/null +++ b/src/app/[name]/orders/layout.tsx @@ -0,0 +1,18 @@ +import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper"; + +export const metadata = { + title: 'Orders', +} + +export default function MenuLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + + return ( + + {children} + + ); +} diff --git a/src/app/[name]/orders/page.tsx b/src/app/[name]/orders/page.tsx new file mode 100644 index 0000000..9a17eb4 --- /dev/null +++ b/src/app/[name]/orders/page.tsx @@ -0,0 +1,123 @@ +'use client'; + +import Button from '@/components/button/PrimaryButton'; +import CalendarIcon from '@/components/icons/CalendarIcon'; +import LocationPinIcon from '@/components/icons/LocationPinIcon'; +import TabContainer from '@/components/tab/TabContainer' +import TabItemRenderer from '@/components/tab/TabItemRenderer' +import clsx from 'clsx'; +import Image from 'next/image'; +import React, { useCallback, useState } from 'react' + +const currentOrders = [ + { + id: 0, + address: 'خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر...', + date: 'دوشنبه، 28 مرداد 1403', + price: '560,000', + items: [ + { id: 0, quantity: 1, image: '/assets/images/food-preview.png' }, + { id: 1, quantity: 1, image: '/assets/images/food-preview.png' }, + { id: 2, quantity: 2, image: '/assets/images/food-preview.png' }, + ] + }, +] + +function OrdersIndex() { + const [selectedTab, setSelectedTab] = useState(0); + const categories = [ + { id: 0, title: 'سفارشات فعال', image: '/assets/images/food-image.png' }, + { id: 1, title: 'سفارشات قبلی', image: '/assets/images/food-image.png' } + ] + + const updateTab = useCallback((index: number) => { + setSelectedTab(index); + }, []); + + const firstTab = () => { + return ( +
+ {currentOrders.map((order) => { + return ( +
+
+
+ +

{order.address}

+
+
+ +

{order.date}

+
+
+ +
+ +
+
+ {order.items.map((item) => { + return ( + + order image + + {item.quantity} + + + ) + })} +
+
+ {order.price} T +
+
+ + +
+ ) + })} +
+ ) + } + + + return ( +
+ + {categories.map((item, index) => ( + updateTab(index)} + > + category image + + {item.title} + + + ))} + + + {/* First tab */} + {selectedTab === 0 && firstTab()} +
+ ) +} + +export default OrdersIndex \ No newline at end of file diff --git a/src/app/menu/page.tsx b/src/app/[name]/page.tsx similarity index 100% rename from src/app/menu/page.tsx rename to src/app/[name]/page.tsx diff --git a/src/app/globals.css b/src/app/globals.css index f129685..cf9b5c2 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -13,6 +13,7 @@ --color-foreground: #333333; --color-disabled: #E7E7E7; --color-disabled2: #7F7F7F; + --color-disabled3: #F2F2F2; --color-disabled-text: #8C90A3; --color-menu-header: #C3C7DD; --color-icon-deactive: #A8ABBF; diff --git a/src/components/icons/CalendarIcon.tsx b/src/components/icons/CalendarIcon.tsx new file mode 100644 index 0000000..000f73d --- /dev/null +++ b/src/components/icons/CalendarIcon.tsx @@ -0,0 +1,82 @@ +import React from 'react'; + +interface TableIconProps { + className?: string; + stroke?: string; + strokeWidth?: number; + size?: number; +} + +const CalendarIcon: React.FC = ({ + className = '', + stroke = '#292D32', + strokeWidth = 1.3, + size = 16, +}) => { + return ( + + + + + + + + + + ); +}; + +export default CalendarIcon; diff --git a/src/components/icons/LocationPinIcon.tsx b/src/components/icons/LocationPinIcon.tsx new file mode 100644 index 0000000..df34618 --- /dev/null +++ b/src/components/icons/LocationPinIcon.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +interface SearchIconProps { + className?: string; + stroke?: string; + strokeWidth?: number; + size?: number; +} + +const LocationPinIcon: React.FC = ({ + className = '', + stroke = '#292D32', + strokeWidth = 1.3, + size = 16, +}) => { + return ( + + + + + ); +}; + +export default LocationPinIcon; diff --git a/src/components/tab/TabContainer.tsx b/src/components/tab/TabContainer.tsx new file mode 100644 index 0000000..aeae2b4 --- /dev/null +++ b/src/components/tab/TabContainer.tsx @@ -0,0 +1,26 @@ +import React, { ReactElement, ReactNode } from 'react' +import HorizontalScrollView from '../listview/HorizontalScrollView' + +type Props = { + itemRenderer?: (child: ReactNode, index: number) => ReactElement; + children: ReactNode; +} & React.OlHTMLAttributes; + + +function TabContainer({ itemRenderer, children, ...restProps }: Props) { + return ( + + {children} + + ) +} + +export default TabContainer \ No newline at end of file diff --git a/src/components/tab/TabItemRenderer.tsx b/src/components/tab/TabItemRenderer.tsx new file mode 100644 index 0000000..c30d2ea --- /dev/null +++ b/src/components/tab/TabItemRenderer.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +type Props = { + children: React.ReactNode; +} & React.HTMLAttributes; + +function TabItemRendererComponent({ children, ...rest }: Props) { + return ( +
+ {children} +
+ ); +} + +// Memoize with shallow comparison of props +const TabItemRenderer = React.memo(TabItemRendererComponent, (prevProps, nextProps) => { + return prevProps.className === nextProps.className && prevProps.children === nextProps.children; +}); + +export default TabItemRenderer;