add: rating page

2025-07-21 19:38:00 +03:30
parent a0b52e7945
commit 13a3c3ce8a
7 changed files with 473 additions and 5 deletions
@@ -0,0 +1,130 @@
+'use client';
+
+import ToggleButton from '@/components/button/ToggleButton';
+import TabContainer, { TabContainerClassNames, TabContainerRenderType } from '@/components/tab/TabContainer';
+import { TabHeader } from '@/components/tab/TabHeader';
+import { Button } from '@/components/ui/button';
+import RateSelectionBar from '@/components/utils/RateSelectionBar';
+import clsx from 'clsx';
+import { useParams } from 'next/navigation';
+import React from 'react'
+
+type Props = object
+
+type Params = {
+    orderId: string;
+}
+
+function RatingOrderIndex({ }: Props) {
+    const params: Params = useParams();
+    console.log(params)
+
+    const badPoitns = () => {
+        return (
+            <>
+                <div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
+                    <ToggleButton name='minus1'>
+                        اماده سازی زمانبر
+                    </ToggleButton>
+                    <ToggleButton name='minus2'>
+                        بهداشت محیطی بد
+                    </ToggleButton>
+                    <ToggleButton name='minus3'>
+                        کیفیت منو پایین
+                    </ToggleButton>
+                    <ToggleButton name='minus4'>
+                        تنوع پایین منو
+                    </ToggleButton>
+                    <ToggleButton name='minus5'>
+                        برخورد نامناسب کارکنان
+                    </ToggleButton>
+                    <ToggleButton name='minus6'>
+                        قیمت نامناسب
+                    </ToggleButton>
+                </div>
+            </>
+        )
+    }
+
+    const goodPoitns = () => {
+        return (
+            <>
+
+                <div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
+                    <ToggleButton name='plus1'>
+                        اماده سازی سریع
+                    </ToggleButton>
+                    <ToggleButton name='plus2'>
+                        بهداشت محیطی خوب
+                    </ToggleButton>
+                    <ToggleButton name='plus3'>
+                        کیفیت منو خوب
+                    </ToggleButton>
+                    <ToggleButton name='plus4'>
+                        تنوع بالا منو
+                    </ToggleButton>
+                    <ToggleButton name='plus5'>
+                        برخورد مناسب کارکنان
+                    </ToggleButton>
+                    <ToggleButton name='plus6'>
+                        قیمت مناسب
+                    </ToggleButton>
+                </div>
+
+            </>
+        )
+    }
+
+    const submitForm = (formData: FormData) => {
+        console.log(formData.get('rating'))
+    }
+
+    return (
+        <section className='min-h-full'>
+            <h1 className='font-medium'>امتیاز شما به رستوران</h1>
+
+            <form action={submitForm} className='bg-container h-full flex flex-col justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
+
+                <div>
+                    <div className='w-full'>
+                        <RateSelectionBar name='rating'/>
+                    </div>
+
+                    <div className='mt-10'>
+                        <TabContainer
+                            defaultIndex={1}
+                            changeType={TabContainerRenderType.VISIBILITY}
+                            className={{
+                                ...TabContainerClassNames,
+                                wrapper: 'p-2!',
+                                scrollView: clsx(
+                                    'border-none! rounded-xl! gap-0! h-full bg-[#EAECF0]! grid! grid-cols-2 px-2! py-2! pt-2!', TabContainerClassNames.scrollView
+                                ),
+                                title: 'text-sm2! font-normal mt-1',
+                                header: 'rounded-lg h-7! w-full',
+                                headerActive: 'bg-primary',
+                                titleActive: 'text-accent'
+                            }}>
+                            <TabHeader title='نقاط ضعف' viewRenderer={badPoitns()}></TabHeader>
+                            <TabHeader title='نقاط قوت' viewRenderer={goodPoitns()}></TabHeader>
+                        </TabContainer>
+                        <div className="w-full mt-6">
+                            <label htmlFor='userOpinion'>نظر شما</label>
+                            <br />
+                            <textarea name='userOpinion' id='userOpinion' placeholder='نظر شما' className='mt-2 w-full h-21 px-4 py-2.5 text-xs text-[#888888] rounded-xl border border-[#D0D0D0]' />
+                            <br />
+                        </div>
+                    </div>
+                </div>
+                <div className="grid grid-cols-2 gap-4 mt-6">
+                    <Button type='submit' className='mt-auto rounded-xl font-normal cursor-pointer'>ثبت بازخورد</Button>
+                    <Button type='submit' className='mt-auto rounded-xl bg-white cursor-pointer hover:bg-neutral-100 border border-foreground text-foreground font-normal'>بازگشت</Button>
+                </div>
+
+
+            </form>
+        </section>
+    )
+}
+
+export default RatingOrderIndex