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;