refactor: tab component
This commit is contained in:
Mahyar Khanbolooki
@@ -3,8 +3,9 @@
|
||||
import Button from '@/components/button/PrimaryButton';
|
||||
import CalendarIcon from '@/components/icons/CalendarIcon';
|
||||
import LocationPinIcon from '@/components/icons/LocationPinIcon';
|
||||
import PerformantTabRenderer from '@/components/tab/PerformantTabRenderer';
|
||||
import TabContainer from '@/components/tab/TabContainer'
|
||||
import { TabItem } from '@/components/tab/TabItem';
|
||||
import { TabHeader } from '@/components/tab/TabHeader';
|
||||
import Image from 'next/image';
|
||||
import React from 'react'
|
||||
|
||||
@@ -53,6 +54,50 @@ const currentOrders = [
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
address: '2...',
|
||||
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' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
address: '3...',
|
||||
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' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
address: '2...',
|
||||
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' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
address: '3...',
|
||||
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() {
|
||||
@@ -63,67 +108,67 @@ function OrdersIndex() {
|
||||
|
||||
const firstTab = () => {
|
||||
return currentOrders.map((order) => {
|
||||
return (
|
||||
<div key={order.id} className='w-full px-[17px] mb-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>
|
||||
return (
|
||||
<div key={order.id} className='w-full px-[17px] mb-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>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TabContainer
|
||||
className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
|
||||
<TabItem title={categories[0].title} imageSrc={categories[0].image}>
|
||||
{firstTab()}
|
||||
</TabItem>
|
||||
<TabItem title={categories[0].title} imageSrc={categories[0].image}>
|
||||
<div>empty</div>
|
||||
</TabItem>
|
||||
</TabContainer>
|
||||
|
||||
{/* First tab */}
|
||||
{/* {selectedTab === 0 && firstTab()} */}
|
||||
className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
|
||||
<TabHeader
|
||||
viewRenderer={<PerformantTabRenderer rowHeight={310}>{firstTab()}</PerformantTabRenderer>}
|
||||
title={categories[0].title} imageSrc={categories[0].image}>
|
||||
</TabHeader>
|
||||
<TabHeader
|
||||
viewRenderer={<PerformantTabRenderer><div>empty</div><div></div></PerformantTabRenderer>}
|
||||
title={categories[0].title} imageSrc={categories[0].image}>
|
||||
</TabHeader>
|
||||
</TabContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user