danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: react-visualizer for performant lists

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-15 02:10:53 +03:30
parent 8011104658
commit 389910e075
5 changed files with 257 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/orders/page.tsx
+46 -38
View File
@@ -4,10 +4,9 @@ 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 { TabItem } from '@/components/tab/TabItem';
import Image from 'next/image';
import React, { useCallback, useState } from 'react'
import React from 'react'
const currentOrders = [
{
@@ -21,25 +20,51 @@ const currentOrders = [
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
]
},
{
id: 1,
address: '1...',
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: 2,
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: 3,
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() {
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 currentOrders.map((order) => {
return (
<div key={order.id} className='w-full px-[17px] mt-4 pt-8 pb-6 bg-white rounded-3xl'>
<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} />
@@ -81,41 +106,24 @@ function OrdersIndex() {
<Button className='mt-6 font-medium!'>پیگیری سفارش</Button>
</div>
)
})}
</div>
)
})
}
return (
<div className='pt-8'>
<div>
<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>
))}
<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()}
{/* {selectedTab === 0 && firstTab()} */}
</div>
)
}