add: orders page

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 (
+    <ClientSideWrapper>
+      {children}
+    </ClientSideWrapper>
+  );
+}

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 (
+            <div>
+                {currentOrders.map((order) => {
+                    return (
+                        <div key={order.id} className='w-full px-[17px] mt-4 pt-8 pb-6 bg-white rounded-3xl'>
+                            <div className="text-sm2">
+                                <div className='flex gap-2'>
+                                    <LocationPinIcon size={16} />
+                                    <p>{order.address}</p>
+                                </div>
+                                <div className='mt-2 flex gap-2'>
+                                    <CalendarIcon size={16} />
+                                    <p>{order.date}</p>
+                                </div>
+                            </div>
+
+                            <hr className='mx-4 mt-6 text-disabled3 border-2' />
+
+                            <div className='flex justify-between mt-6'>
+                                <div className='flex justify-start gap-[9px]'>
+                                    {order.items.map((item) => {
+                                        return (
+                                            <span key={item.id} className='w-8 h-8 relative'>
+                                                <Image
+                                                    priority
+                                                    className='rounded-lg'
+                                                    src={item.image}
+                                                    width={32}
+                                                    height={32}
+                                                    alt="order image"
+                                                />
+                                                <span className="absolute -bottom-3.5 -right-0.5 text-xs2 bg-white border border-border rounded-full w-[18px] h-[18px] text-center leading-4.5">
+                                                    {item.quantity}
+                                                </span>
+                                            </span>
+                                        )
+                                    })}
+                                </div>
+                                <div className='font-medium text-sm' dir='ltr'>
+                                    {order.price} T
+                                </div>
+                            </div>
+
+                            <Button className='mt-6 font-medium!'>پیگیری سفارش</Button>
+                        </div>
+                    )
+                })}
+            </div>
+        )
+    }
+
+
+    return (
+        <div className='pt-8'>
+            <TabContainer
+                className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
+                {categories.map((item, index) => (
+                    <TabItemRenderer
+                        key={index}
+                        className={''}
+                        onClick={() => updateTab(index)}
+                    >
+                        <Image
+                            priority
+                            src={item.image}
+                            width={24}
+                            height={24}
+                            alt="category image"
+                        />
+                        <span className={clsx(
+                            'text-xs transition-all duration-150',
+                            index === selectedTab ? 'text-black' : 'text-disabled-text'
+                        )}>
+                            {item.title}
+                        </span>
+                    </TabItemRenderer>
+                ))}
+            </TabContainer>
+
+            {/* First tab */}
+            {selectedTab === 0 && firstTab()}
+        </div>
+    )
+}
+
+export default OrdersIndex

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;

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<TableIconProps> = ({
+  className = '',
+  stroke = '#292D32',
+  strokeWidth = 1.3,
+  size = 16,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.3335 1.33325V3.33325"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.6665 1.33325V3.33325"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.3335 6.06006H13.6668"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 5.66659V11.3333C14 13.3333 13 14.6666 10.6667 14.6666H5.33333C3 14.6666 2 13.3333 2 11.3333V5.66659C2 3.66659 3 2.33325 5.33333 2.33325H10.6667C13 2.33325 14 3.66659 14 5.66659Z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.99715 9.13338H8.00314"
+        stroke={stroke}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.52938 9.13338H5.53537"
+        stroke={stroke}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.52938 11.1334H5.53537"
+        stroke={stroke}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CalendarIcon;

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<SearchIconProps> = ({
+  className = '',
+  stroke = '#292D32',
+  strokeWidth = 1.3,
+  size = 16,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.99992 8.95321C9.14867 8.95321 10.0799 8.02197 10.0799 6.87321C10.0799 5.72446 9.14867 4.79321 7.99992 4.79321C6.85117 4.79321 5.91992 5.72446 5.91992 6.87321C5.91992 8.02197 6.85117 8.95321 7.99992 8.95321Z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+      <path
+        d="M2.4133 5.65992C3.72664 -0.113413 12.28 -0.106746 13.5866 5.66659C14.3533 9.05325 12.2466 11.9199 10.4 13.6933C9.05997 14.9866 6.93997 14.9866 5.5933 13.6933C3.7533 11.9199 1.64664 9.04659 2.4133 5.65992Z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+export default LocationPinIcon;

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<HTMLUListElement>;
+
+
+function TabContainer({ itemRenderer, children, ...restProps }: Props) {
+    return (
+        <HorizontalScrollView
+            style={{
+                backgroundColor: '#FFFFFF70',
+                justifyContent: 'center',
+                border: '2px solid white',
+                borderRadius: '32px',
+            }}
+            itemRenderer={itemRenderer}
+            {...restProps}>
+            {children}
+        </HorizontalScrollView>
+    )
+}
+
+export default TabContainer

src/components/tab/TabItemRenderer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+type Props = {
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+function TabItemRendererComponent({ children, ...rest }: Props) {
+  return (
+    <div
+      {...rest}
+      className={`${rest.className} transition-all duration-200 ease-out w-full h-full flex flex-col items-center justify-center gap-2`}
+    >
+      {children}
+    </div>
+  );
+}
+
+// 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;