hamid zarghami
90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import Button from '@/components/Button'
|
||
import Filters from '@/components/Filters'
|
||
import SwitchComponent from '@/components/Switch'
|
||
import Table from '@/components/Table'
|
||
import { AddSquare, Edit } from 'iconsax-react'
|
||
import { type FC } from 'react'
|
||
|
||
const FeaturesList: FC = () => {
|
||
return (
|
||
<div className='mt-5'>
|
||
<div className='flex justify-between'>
|
||
<h1 className='text-lg font-light'>
|
||
ویژگی ها
|
||
</h1>
|
||
|
||
<Button
|
||
className='w-fit px-6'
|
||
>
|
||
<div className='flex gap-2 items-center'>
|
||
<AddSquare size={18} color='black' />
|
||
<div className='text-[13px]'>ویژگی جدید</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className='mt-8'>
|
||
<Filters
|
||
fields={[
|
||
{
|
||
name: 'search',
|
||
type: 'input',
|
||
placeholder: 'جستجو'
|
||
}
|
||
]}
|
||
onChange={() => { }}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-8'>
|
||
<Table
|
||
columns={[
|
||
{
|
||
key: 'id',
|
||
title: 'شماره',
|
||
},
|
||
{
|
||
key: 'title',
|
||
title: 'عنوان',
|
||
},
|
||
{
|
||
key: 'items',
|
||
title: 'آیتم ها',
|
||
},
|
||
{
|
||
key: 'status',
|
||
title: 'وضعیت',
|
||
render: () => {
|
||
return (
|
||
<SwitchComponent
|
||
active={true}
|
||
onChange={() => { }}
|
||
/>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'actions',
|
||
title: '',
|
||
render: () => {
|
||
return (
|
||
<Edit size={20} color='#0037FF' />
|
||
)
|
||
}
|
||
},
|
||
]}
|
||
data={[
|
||
{
|
||
id: 1,
|
||
title: 'رنگ',
|
||
items: 'آبی، سبز، قرمز',
|
||
status: 'فعال',
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default FeaturesList |