orders
This commit is contained in:
hamid zarghami
@@ -0,0 +1,146 @@
|
|||||||
|
'use client'
|
||||||
|
import withLayout from '@/hoc/withLayout'
|
||||||
|
import { NextPage } from 'next'
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import Menu from '../components/Menu'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||||
|
import 'swiper/css';
|
||||||
|
|
||||||
|
|
||||||
|
const Orders: NextPage = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState<'current' | 'delivered' | 'returned' | 'cancelled'>('current')
|
||||||
|
|
||||||
|
const mockOrders = [
|
||||||
|
{
|
||||||
|
id: '656151',
|
||||||
|
amount: '18,500,000',
|
||||||
|
status: 'در انتظار پرداخت',
|
||||||
|
date: '1401 / 10 / 12',
|
||||||
|
products: [
|
||||||
|
{ id: 1, image: 'https://picsum.photos/80/80?random=1', name: 'گوشی موبایل سامسونگ مدل Galaxy S24 Ultra' },
|
||||||
|
{ id: 2, image: 'https://picsum.photos/80/80?random=2', name: 'لحاف کرسی ستین مدل ساده' },
|
||||||
|
{ id: 3, image: 'https://picsum.photos/80/80?random=3', name: 'روغنی ستین کد T-2112 طرح گلریز' },
|
||||||
|
{ id: 4, image: 'https://picsum.photos/80/80?random=4', name: 'شارژر دیواری 65 وات ماگسیونگ' },
|
||||||
|
{ id: 5, image: 'https://picsum.photos/80/80?random=5', name: 'گوشی موبایل سامسونگ مدل Galaxy S24 Ultra' },
|
||||||
|
{ id: 6, image: 'https://picsum.photos/80/80?random=6', name: 'لحاف کرسی ستین مدل ساده' },
|
||||||
|
{ id: 7, image: 'https://picsum.photos/80/80?random=7', name: 'روغنی ستین کد T-2112 طرح گلریز' },
|
||||||
|
{ id: 8, image: 'https://picsum.photos/80/80?random=8', name: 'شارژر دیواری 65 وات ماگسیونگ' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '846511',
|
||||||
|
amount: '254,500,000',
|
||||||
|
status: 'وضعیت سفارش: در حال ارسال',
|
||||||
|
date: '1401 / 8 / 10',
|
||||||
|
products: [
|
||||||
|
{ id: 1, image: 'https://picsum.photos/80/80?random=5', name: 'گوشی موبایل سامسونگ مدل Galaxy S24 Ultra' },
|
||||||
|
{ id: 2, image: 'https://picsum.photos/80/80?random=6', name: 'لحاف کرسی ستین مدل ساده' },
|
||||||
|
{ id: 3, image: 'https://picsum.photos/80/80?random=7', name: 'روغنی ستین کد T-2112 طرح گلریز' },
|
||||||
|
{ id: 4, image: 'https://picsum.photos/80/80?random=8', name: 'شارژر دیواری 65 وات ماگسیونگ' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ key: 'current' as const, label: 'جاری', count: 10 },
|
||||||
|
{ key: 'delivered' as const, label: 'تحویل شده', count: 3 },
|
||||||
|
{ key: 'returned' as const, label: 'مرجوع شده', count: 3 },
|
||||||
|
{ key: 'cancelled' as const, label: 'لغو شده', count: 3 }
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='p-6'>
|
||||||
|
<Menu pageActive='orders' />
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className='mt-14 border-b border-gray-200'>
|
||||||
|
<div className='flex gap-8'>
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.key}
|
||||||
|
onClick={() => setActiveTab(tab.key)}
|
||||||
|
className={`pb-4 px-2 border-b-2 transition-colors ${activeTab === tab.key
|
||||||
|
? 'border-primary text-primary'
|
||||||
|
: 'border-transparent text-gray-600 hover:text-gray-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className='ml-2'>{tab.label}</span>
|
||||||
|
<span className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs rounded-full ${activeTab === tab.key
|
||||||
|
? 'bg-primary text-white'
|
||||||
|
: 'bg-gray-200 text-gray-600'
|
||||||
|
}`}>
|
||||||
|
{tab.count}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Orders List */}
|
||||||
|
<div className='mt-6 space-y-4'>
|
||||||
|
{mockOrders.map((order) => (
|
||||||
|
<div key={order.id} className='bg-white border border-[#E0E0E0] rounded-[8px] p-5'>
|
||||||
|
<div className='flex gap-6'>
|
||||||
|
<div className='max-w-[234px]'>
|
||||||
|
<div className=''>
|
||||||
|
<div className='text-sm text-[#7F7F7F] mb-1'>
|
||||||
|
شماره سفارش: <span className='text-black'> {order.id}</span>
|
||||||
|
</div>
|
||||||
|
<div className='text-sm text-[#7F7F7F] mt-4'>
|
||||||
|
مبلغ: <span className='text-black'> {order.amount} تومان</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mb-6 mt-4'>
|
||||||
|
<div className='text-sm text-[#7F7F7F]'>
|
||||||
|
وضعیت سفارش : <span className='text-black'>{order.status}</span>
|
||||||
|
</div>
|
||||||
|
<div className='text-sm text-[#7F7F7F] mt-4'>
|
||||||
|
تاریخ ثبت سفارش: <span className='text-black'> {order.date}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='flex gap-3'>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className='px-6 py-2 h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50'
|
||||||
|
>
|
||||||
|
جزئیات سفارش
|
||||||
|
</Button>
|
||||||
|
<Button className='bg-primary hover:bg-primary/80 px-6 py-2 h-9 text-white'>
|
||||||
|
پرداخت
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className='flex-1 flex gap-4 border-r border-border pr-5 overflow-hidden min-h-[225px]'>
|
||||||
|
|
||||||
|
<Swiper
|
||||||
|
spaceBetween={16}
|
||||||
|
slidesPerView={'auto'}
|
||||||
|
className='h-full w-full'
|
||||||
|
grabCursor={true}
|
||||||
|
>
|
||||||
|
{order.products.map((product) => (
|
||||||
|
<SwiperSlide key={product.id} className='!w-[234px]'>
|
||||||
|
<div className='flex w-[234px] h-[224px] flex-col p-7 items-center rounded-xl gap-2 border border-border'>
|
||||||
|
<Image src={product.image} className='max-w-[140px] max-h-[140px] object-center' alt={product.name} width={100} height={100} />
|
||||||
|
<div className='max-w-[200px] text-center text-sm font-light mt-4'>{product.name}</div>
|
||||||
|
</div>
|
||||||
|
</SwiperSlide>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withLayout(Orders)
|
||||||
Reference in New Issue
Block a user