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