api ulandi

src/pages/faq/ui/Faq.tsx

@@ -40,6 +40,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Pencil, PlusCircle, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import z from "zod";
 
 type FaqType = {
@@ -102,6 +103,7 @@ const faqForm = z.object({
 const Faq = () => {
   const [faqs, setFaqs] = useState<FaqType[]>(initialFaqs);
   const [activeTab, setActiveTab] = useState("umumiy");
+  const { t } = useTranslation();
   const [openModal, setOpenModal] = useState(false);
   const [editFaq, setEditFaq] = useState<FaqType | null>(null);
   const [deleteId, setDeleteId] = useState<number | null>(null);
@@ -147,7 +149,9 @@ const Faq = () => {
     <div className="p-6 space-y-6 w-full">
       {/* Header */}
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">FAQ (Savol va javoblar)</h1>
+        <h1 className="text-2xl font-semibold">
+          {t("FAQ (Savol va javoblar)")}
+        </h1>
         <Button
           className="gap-2"
           onClick={() => {
@@ -155,7 +159,7 @@ const Faq = () => {
             setOpenModal(true);
           }}
         >
-          <PlusCircle className="w-4 h-4" /> Yangi qo‘shish
+          <PlusCircle className="w-4 h-4" /> {t("Yangi qo‘shish")}
         </Button>
       </div>
 
@@ -176,10 +180,10 @@ const Faq = () => {
                 <TableHeader>
                   <TableRow>
                     <TableHead className="w-[50px] text-center">#</TableHead>
-                    <TableHead>Savol</TableHead>
-                    <TableHead>Javob</TableHead>
+                    <TableHead>{t("Savol")}</TableHead>
+                    <TableHead>{t("Javob")}</TableHead>
                     <TableHead className="w-[120px] text-center">
-                      Amallar
+                      {t("Amallar")}
                     </TableHead>
                   </TableRow>
                 </TableHeader>
@@ -220,7 +224,7 @@ const Faq = () => {
             </div>
           ) : (
             <p className="text-gray-500 text-sm mt-4">
-              Bu bo‘limda savollar yo‘q.
+              {t("Bu bo‘limda savollar yo‘q.")}
             </p>
           )}
         </TabsContent>
@@ -230,7 +234,7 @@ const Faq = () => {
         <DialogContent className="sm:max-w-[500px] bg-gray-900">
           <DialogHeader>
             <DialogTitle>
-              {editFaq ? "FAQni tahrirlash" : "Yangi FAQ qo‘shish"}
+              {editFaq ? t("FAQni tahrirlash") : t("Yangi FAQ qo‘shish")}
             </DialogTitle>
           </DialogHeader>
 
@@ -241,18 +245,18 @@ const Faq = () => {
                 name="categories"
                 render={({ field }) => (
                   <FormItem>
-                    <Label className="text-md">Kategoriya</Label>
+                    <Label className="text-md">{t("Kategoriya")}</Label>
                     <FormControl>
                       <Select
                         onValueChange={field.onChange}
                         value={field.value}
                       >
                         <SelectTrigger className="w-full !h-12 border-gray-700 text-white">
-                          <SelectValue placeholder="Kategoriya tanlang" />
+                          <SelectValue placeholder={t("Kategoriya tanlang")} />
                         </SelectTrigger>
                         <SelectContent className="border-gray-700 text-white">
                           <SelectGroup>
-                            <SelectLabel>Kategoriyalar</SelectLabel>
+                            <SelectLabel>{t("Kategoriyalar")}</SelectLabel>
                             {categories.map((cat) => (
                               <SelectItem key={cat.value} value={cat.value}>
                                 {cat.label}
@@ -271,10 +275,10 @@ const Faq = () => {
                 name="title"
                 render={({ field }) => (
                   <FormItem>
-                    <Label className="text-md">Savol</Label>
+                    <Label className="text-md">{t("Savol")}</Label>
                     <FormControl>
                       <Input
-                        placeholder="Savol"
+                        placeholder={t("Savol")}
                         {...field}
                         className="h-12 !text-md bg-gray-800 border-gray-700 text-white"
                       />
@@ -288,10 +292,10 @@ const Faq = () => {
                 name="answer"
                 render={({ field }) => (
                   <FormItem>
-                    <Label className="text-md">Javob</Label>
+                    <Label className="text-md">{t("Javob")}</Label>
                     <FormControl>
                       <Textarea
-                        placeholder="Javob"
+                        placeholder={t("Javob")}
                         {...field}
                         className="min-h-48 max-h-56 !text-md bg-gray-800 border-gray-700 text-white"
                       />
@@ -309,14 +313,13 @@ const Faq = () => {
                   }}
                   className="bg-gray-600 px-5 py-5 hover:bg-gray-700 text-white mt-4 cursor-pointer"
                 >
-                  Bekor qilish
+                  {t("Bekor qilish")}
                 </Button>
                 <Button
                   type="submit"
                   className="bg-blue-600 px-5 py-5 hover:bg-blue-700 text-white mt-4 cursor-pointer"
                 >
-                  {/* {isEditMode ? "Yangilikni saqlash" : "Keyingisi"} */}
-                  Qo'shish
+                  {t("Qo'shish")}
                 </Button>
               </div>
             </form>
@@ -327,14 +330,14 @@ const Faq = () => {
       <Dialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
         <DialogContent className="sm:max-w-[400px]">
           <DialogHeader>
-            <DialogTitle>Haqiqatan ham o‘chirmoqchimisiz?</DialogTitle>
+            <DialogTitle>{t("Haqiqatan ham o‘chirmoqchimisiz?")}</DialogTitle>
           </DialogHeader>
           <DialogFooter>
             <Button variant="outline" onClick={() => setDeleteId(null)}>
-              Bekor qilish
+              {t("Bekor qilish")}
             </Button>
             <Button variant="destructive" onClick={handleDelete}>
-              O‘chirish
+              {t("O'chirish")}
             </Button>
           </DialogFooter>
         </DialogContent>