order ticket

src/pages/order/OrderDetail.tsx

@@ -1,17 +1,14 @@
-import { type FC, useState } from 'react'
-import { Microphone, Paperclip2, Receipt1 } from 'iconsax-react'
-import Button from '@/components/Button'
-import UploadBox from '@/components/UploadBox'
-import Input from '@/components/Input'
+import { type FC } from 'react'
+import { Receipt1 } from 'iconsax-react'
 import { useParams } from 'react-router-dom'
 import { useGetOrderDetails } from './hooks/useOrderData'
+import TicketSection from './components/TicketSection'
 
 const OrderDetail: FC = () => {
 
     const { id } = useParams()
     const { data } = useGetOrderDetails(id!)
-    const [message, setMessage] = useState('')
-    const [files, setFiles] = useState<File[]>([])
+
 
     const orderData = {
         orderId: '۱۲۲۴۵',
@@ -22,9 +19,6 @@ const OrderDetail: FC = () => {
         description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاق...'
     }
 
-    const handleSubmit = () => {
-        console.log('Submit:', { message, files })
-    }
 
     return (
         <div className="w-full min-h-screen bg-[#eceef6] p-6">
@@ -94,75 +88,7 @@ const OrderDetail: FC = () => {
             </div>
 
             {/* Bottom Section - White Card */}
-            <div className="bg-white rounded-2xl p-6">
-                {/* Designer Name */}
-                <div className="mt-6">
-                    <Input
-                        label="نام طراح"
-                        placeholder="عباس حسینی"
-                        readOnly
-                    />
-                </div>
-
-                <div className='bg-[#F5F7FC] rounded-4xl rounded-tr-none mt-6 p-6 max-w-[55%]'>
-                    <div className='text-sm font-light text-black leading-6'>
-                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
-                    </div>
-
-                    <div className='flex justify-between mt-3'>
-                        <div className='flex items-center gap-1.5 text-[#0047FF]'>
-                            <Paperclip2 size={20} color="#0047FF" />
-                            <div className='text-xs'>loremipsum.pdf</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className='flex justify-end'>'
-                    <div className='bg-[#F5F7FC] rounded-4xl rounded-tl-none mt-6 p-6 max-w-[55%]'>
-                        <div className='flex gap-1 text-sm mb-2'>
-                            <div className='font-bold'>طراح : </div>
-                            <div>عباس حسینی</div>
-                        </div>
-                        <div className='text-sm font-light text-black leading-6'>
-                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
-                        </div>
-                    </div>
-                </div>
-
-
-
-                <div className="mt-6">
-                    <div className="text-sm mb-2 text-black">پیام شما</div>
-                    <div className="relative">
-                        <textarea
-                            value={message}
-                            onChange={(e) => setMessage(e.target.value)}
-                            className="w-full h-40 bg-white border border-[#f5f7fc] rounded-xl p-4 text-sm resize-none outline-none"
-                            placeholder=""
-                        />
-                        <button className="absolute left-4 bottom-4 bg-[#FFF1D7] size-8 rounded-lg flex items-center justify-center">
-                            <Microphone size={20} color="black" />
-                        </button>
-                    </div>
-                </div>
-
-
-                <div className="mt-6">
-                    <UploadBox
-                        label="فایل های ضمیمه"
-                        isMultiple={true}
-                        onChange={setFiles}
-                    />
-                </div>
-
-                <div className="flex mt-10 justify-end">
-                    <Button
-                        label="ارسال"
-                        onClick={handleSubmit}
-                        className='w-[150px]'
-                    />
-                </div>
-            </div>
+            <TicketSection />
         </div>
     )
 }