hamid zarghami
172 lines
6.9 KiB
TypeScript
172 lines
6.9 KiB
TypeScript
import Button from '@/components/Button'
|
||
import Input from '@/components/Input'
|
||
import Select from '@/components/Select'
|
||
import Textarea from '@/components/Textarea'
|
||
import { COLORS } from '@/constants/colors'
|
||
import { Printer, TickSquare } from 'iconsax-react'
|
||
import { type FC } from 'react'
|
||
|
||
const PrintService: FC = () => {
|
||
return (
|
||
<div className='mt-5'>
|
||
{/* Header Section */}
|
||
<div className='flex justify-between items-center'>
|
||
<h1 className='text-lg font-light'>خدمات چاپ</h1>
|
||
<div className='flex gap-3'>
|
||
<Button className='w-fit px-6 bg-transparent border border-primary text-primary'>
|
||
<div className='flex gap-1.5'>
|
||
<Printer size={18} color={COLORS.primary} />
|
||
<div className='text-[13px] font-light'>چاپ</div>
|
||
</div>
|
||
</Button>
|
||
<Button className='w-fit px-6 bg-primary'>
|
||
<div className='flex gap-1.5'>
|
||
<TickSquare size={18} color='black' />
|
||
<div className='text-[13px] font-light'>ذخیره خدمات</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='mt-8 grid grid-cols-1 lg:grid-cols-12 gap-6'>
|
||
{/* Left Sidebar */}
|
||
|
||
|
||
{/* Right Content */}
|
||
<div className='lg:col-span-8 space-y-6'>
|
||
{/* Order Details Card */}
|
||
<div className='bg-white p-6 rounded-3xl'>
|
||
<h2 className='font-light text-lg mb-6'>جزئیات سفارش</h2>
|
||
|
||
<div className='flex gap-4 mb-6'>
|
||
<Input
|
||
label='تیراژ'
|
||
name='quantity'
|
||
onChange={() => { }}
|
||
seprator
|
||
/>
|
||
<Select
|
||
label='نوع کاغذ'
|
||
items={[
|
||
{ value: 'normal', label: 'کاغذ معمولی' },
|
||
{ value: 'glossy', label: 'کاغذ براق' },
|
||
{ value: 'matte', label: 'کاغذ مات' }
|
||
]}
|
||
/>
|
||
<Select
|
||
label='نوع روکش'
|
||
items={[
|
||
{ value: 'none', label: 'بدون روکش' },
|
||
{ value: 'uv', label: 'روکش UV' },
|
||
{ value: 'laminate', label: 'لمینت' }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div className='flex gap-4 mb-6'>
|
||
<Input
|
||
label='گرماژ کاغذ'
|
||
name='paperWeight'
|
||
onChange={() => { }}
|
||
/>
|
||
<Select
|
||
label='نوع صحافی'
|
||
items={[
|
||
{ value: 'stapled', label: 'منگنه' },
|
||
{ value: 'glued', label: 'چسب' },
|
||
{ value: 'spiral', label: 'سیمی' }
|
||
]}
|
||
/>
|
||
<Select
|
||
label='قالب ساز'
|
||
items={[
|
||
{ value: 'standard', label: 'استاندارد' },
|
||
{ value: 'custom', label: 'سفارشی' }
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mb-6'>
|
||
<Input
|
||
label='لیتوگرافی'
|
||
name='lithography'
|
||
onChange={() => { }}
|
||
/>
|
||
</div>
|
||
|
||
<Textarea
|
||
label='توضیحات'
|
||
/>
|
||
</div>
|
||
|
||
{/* Designer Notes Card */}
|
||
<div className='bg-white p-6 rounded-3xl'>
|
||
<h2 className='font-light text-lg mb-6'>توضیحات طراح</h2>
|
||
|
||
<Input
|
||
label='تعداد رنگ'
|
||
name='colorCount'
|
||
onChange={() => { }}
|
||
/>
|
||
|
||
<div className='flex gap-4 mt-6'>
|
||
|
||
<Input
|
||
label='اندازه سند چاپی'
|
||
name='printSize'
|
||
onChange={() => { }}
|
||
/>
|
||
<Input
|
||
label='اندازه تیغ به تیغ'
|
||
name='bleedSize'
|
||
onChange={() => { }}
|
||
/>
|
||
|
||
<Input
|
||
label='تعداد فرم'
|
||
name='formCount'
|
||
onChange={() => { }}
|
||
/>
|
||
<Input
|
||
label='تعداد در فرم'
|
||
name='quantityPerForm'
|
||
onChange={() => { }}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-6'>
|
||
<Textarea
|
||
label='توضیحات'
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='lg:col-span-4'>
|
||
<div className='bg-white p-6 rounded-3xl'>
|
||
<div className='space-y-6'>
|
||
<Input
|
||
label='عنوان'
|
||
name='title'
|
||
onChange={() => { }}
|
||
/>
|
||
|
||
<Textarea
|
||
label='توضیحات'
|
||
/>
|
||
|
||
<Textarea
|
||
label='هشدارها'
|
||
/>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PrintService
|