add: rating page locale

src/app/[name]/rating/[orderId]/page.tsx

@@ -8,6 +8,7 @@ import RateSelectionBar from '@/components/utils/RateSelectionBar';
 import clsx from 'clsx';
 import { useParams } from 'next/navigation';
 import React from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = object
 
@@ -17,30 +18,18 @@ type Params = {
 
 function RatingOrderIndex({ }: Props) {
     const params: Params = useParams();
-    console.log(params)
+    console.log(params);
+    const { t } = useTranslation("rating");
 
     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>
+                    {[...Array(6)].map((_, i) => (
+                        <ToggleButton key={i} name={`weekness${i}`}>
+                            {t(`Tabs.Weeknesses.Options.${i}`)}
+                        </ToggleButton>
+                    ))}
                 </div>
             </>
         )
@@ -49,28 +38,13 @@ function RatingOrderIndex({ }: Props) {
     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>
+                    {[...Array(6)].map((_, i) => (
+                        <ToggleButton key={i} name={`strength${i}`}>
+                            {t(`Tabs.Strengths.Options.${i}`)}
+                        </ToggleButton>
+                    ))}
                 </div>
-
             </>
         )
     }
@@ -81,13 +55,13 @@ function RatingOrderIndex({ }: Props) {
 
     return (
         <section className='flex flex-col h-full pt-6'>
-            <h1 className='font-medium'>امتیاز شما به رستوران</h1>
+            <h1 className='font-medium'>{t("Heading")}</h1>
 
             <form action={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
 
                 <div>
                     <div className='w-full'>
-                        <RateSelectionBar name='rating'/>
+                        <RateSelectionBar name='rating' />
                     </div>
 
                     <div className='mt-10'>
@@ -105,20 +79,24 @@ function RatingOrderIndex({ }: Props) {
                                 headerActive: 'bg-primary',
                                 titleActive: 'text-accent'
                             }}>
-                            <TabHeader title='نقاط ضعف' viewRenderer={badPoitns()}></TabHeader>
-                            <TabHeader title='نقاط قوت' viewRenderer={goodPoitns()}></TabHeader>
+                            <TabHeader title={t("Tabs.Weeknesses.Title")} viewRenderer={badPoitns()}></TabHeader>
+                            <TabHeader title={t("Tabs.Strengths.Title")} viewRenderer={goodPoitns()}></TabHeader>
                         </TabContainer>
                         <div className="w-full mt-6">
-                            <label htmlFor='userOpinion'>نظر شما</label>
+                            <label htmlFor='userOpinion'>{t("InputComment.Label")}</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]' />
+                            <textarea name='userOpinion' id='userOpinion' placeholder={t("InputComment.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>
+                    <Button type='submit' className='mt-auto rounded-xl font-normal cursor-pointer'>
+                        {t("ButtonSubmit")}
+                    </Button>
+                    <Button type='submit' className='mt-auto rounded-xl bg-white cursor-pointer hover:bg-neutral-100 border border-foreground text-foreground font-normal'>
+                        {t("ButtonCancel")}
+                    </Button>
                 </div>
 
 

src/app/layout.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
   description: 'Webapp dashboard',
 }
 
-const i18nNamespaces = ['common', 'menu', 'orders', 'auth'];
+const i18nNamespaces = ['common', 'menu', 'orders', 'auth', "rating"];
 
 export default async function RootLayout({
   children,

src/locales/fa/rating.json

@@ -0,0 +1,33 @@
+{
+    "Heading": "امتیاز شما به رستوران",
+    "Tabs": {
+        "Strengths": {
+            "Title": "نقاط قوت",
+            "Options": [
+                "آماده سازی سریع",
+                "بهداشت محیطی خوب",
+                "کیفیت خوب منو",
+                "تنوع بالا منو",
+                "برخورد مناسب کارکنان",
+                "قیمت مناسب"
+            ]
+        },
+        "Weeknesses": {
+            "Title": "نقاط ضعف",
+            "Options": [
+                "آماده سازی زمانبر",
+                "بهداشت محیطی بد",
+                "کیفیت خوب پایین",
+                "تنوع کم منو",
+                "برخورد غیر حرفه ای کارکنان",
+                "قیمت نامناسب"
+            ]
+        }
+    },
+    "InputComment": {
+        "Label": "نظر شما",
+        "Placeholder": "نظر شما"
+    },
+    "ButtonSubmit": "ثبت بازخورد",
+    "ButtonCancel": "بازگشت"
+}