language_support_expansion

Author: Lungsangg

src/components/routes/verse-of-day/VerseOfDayForm.tsx

@@ -31,7 +31,7 @@ interface VerseOfDayFormProps {
   existingVerses: VerseOfDayItem[];
 }
 
-type LanguageCode = "EN" | "BO" | "ZH";
+type LanguageCode = "EN" | "BO" | "ZH" | "HI" | "NE" | "MN";
 
 const VerseOfDayForm = ({
   mode,
@@ -45,6 +45,9 @@ const VerseOfDayForm = ({
     en: "",
     bo: "",
     zh: "",
+    hi: "",
+    ne: "",
+    mn: "",
   });
   const [imageKey, setImageKey] = useState<string | null>(null);
   const [imagePreview, setImagePreview] = useState<string | null>(null);
@@ -60,6 +63,9 @@ const VerseOfDayForm = ({
         en: initialData.verses.en || "",
         bo: initialData.verses.bo || "",
         zh: initialData.verses.zh || "",
+        hi: initialData.verses.hi || "",
+        ne: initialData.verses.ne || "",
+        mn: initialData.verses.mn || "",
       });
       // Set image preview from existing data
       setImageKey(null);
@@ -69,7 +75,7 @@ const VerseOfDayForm = ({
       setDate(parse(initialData.date, "yyyy-MM-dd", new Date()));
     } else {
       setActiveLanguage("EN");
-      setVerses({ en: "", bo: "", zh: "" });
+      setVerses({ en: "", bo: "", zh: "", hi: "", ne: "", mn: "" });
       setImageKey(null);
       setImagePreview(null);
       setGroupId("");
@@ -129,7 +135,7 @@ const VerseOfDayForm = ({
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!verses.en.trim() && !verses.bo.trim() && !verses.zh.trim()) {
+    if (!verses.en.trim() && !verses.bo.trim() && !verses.zh.trim() && !verses.hi.trim() && !verses.ne.trim() && !verses.mn.trim()) {
       toast.error("At least one verse content is required");
       return;
     }
@@ -167,6 +173,9 @@ const VerseOfDayForm = ({
           en: verses.en.trim(),
           bo: verses.bo.trim(),
           zh: verses.zh.trim(),
+          hi: verses.hi.trim(),
+          ne: verses.ne.trim(),
+          mn: verses.mn.trim(),
         },
       };
 
@@ -194,6 +203,9 @@ const VerseOfDayForm = ({
           en: verses.en.trim(),
           bo: verses.bo.trim(),
           zh: verses.zh.trim(),
+          hi: verses.hi.trim(),
+          ne: verses.ne.trim(),
+          mn: verses.mn.trim(),
         },
         image_urls: imageKey ? [imageKey] : [],
         group_id: groupId.trim() || null,

src/components/routes/verse-of-day/VerseOfDayFormDialog.tsx

@@ -25,7 +25,7 @@ const VerseOfDayFormDialog = ({
 
   return (
     <Pecha.Dialog open={open} onOpenChange={onOpenChange}>
-      <Pecha.DialogContent className="flex max-h-[min(90dvh,90vh)] w-[calc(100%-2rem)] max-w-4xl flex-col gap-0 overflow-hidden p-0 sm:w-full">
+      <Pecha.DialogContent className="flex max-h-[min(90dvh,90vh)] w-[calc(100%-2rem)] max-w-[1100px] flex-col gap-0 overflow-hidden p-0 sm:w-full">
         <Pecha.DialogHeader className="shrink-0 border-b px-6 py-4">
           <Pecha.DialogTitle>
             {mode === "edit" ? "Edit Verse of Day" : "Create Verse of Day"}

src/components/routes/verse-of-day/VerseOfDayList.tsx

@@ -46,9 +46,7 @@ const VerseOfDayList = ({ onEdit, onDelete }: VerseOfDayListProps) => {
       <Pecha.Table>
         <Pecha.TableHeader>
           <Pecha.TableRow>
-            <Pecha.TableHead className="w-[250px]">English</Pecha.TableHead>
-            <Pecha.TableHead className="w-[250px]">བོད་ཡིག (Tibetan)</Pecha.TableHead>
-            <Pecha.TableHead className="w-[250px]">中文 (Chinese)</Pecha.TableHead>
+            <Pecha.TableHead className="w-[400px]">English</Pecha.TableHead>
             <Pecha.TableHead className="w-[100px]">Image</Pecha.TableHead>
             <Pecha.TableHead className="w-[120px]">Date</Pecha.TableHead>
             <Pecha.TableHead className="w-[150px]">Group</Pecha.TableHead>
@@ -58,21 +56,11 @@ const VerseOfDayList = ({ onEdit, onDelete }: VerseOfDayListProps) => {
         <Pecha.TableBody>
           {sortedVerses.map((verse) => (
             <Pecha.TableRow key={verse.id}>
-              <Pecha.TableCell className="max-w-[250px]">
+              <Pecha.TableCell className="max-w-[400px]">
                 <p className="text-sm line-clamp-2">
                   {verse.verses.en || <span className="text-muted-foreground">—</span>}
                 </p>
               </Pecha.TableCell>
-              <Pecha.TableCell className="max-w-[250px]">
-                <p className="text-sm line-clamp-2">
-                  {verse.verses.bo || <span className="text-muted-foreground">—</span>}
-                </p>
-              </Pecha.TableCell>
-              <Pecha.TableCell className="max-w-[250px]">
-                <p className="text-sm line-clamp-2">
-                  {verse.verses.zh || <span className="text-muted-foreground">—</span>}
-                </p>
-              </Pecha.TableCell>
               <Pecha.TableCell>
                 {verse.image_url ? (
                   <img

src/components/routes/verse-of-day/api/verseOfDayApi.ts

@@ -4,6 +4,9 @@ export interface VerseContent {
   en: string;
   bo: string;
   zh: string;
+  hi: string;
+  ne: string;
+  mn: string;
 }
 
 export interface VerseOfDayPayload {

src/lib/constant.ts

@@ -16,6 +16,9 @@ export const PLAN_LANGUAGE = [
   { label: "English", value: "EN" },
   { label: "བོད་ཡིག", value: "BO" },
   { label: "中文", value: "ZH" },
+  { label: "Hindi", value: "HI" },
+  { label: "Nepali", value: "NE" },
+  { label: "Mongolian", value: "MN" },
 ];
 export const SOCIAL_PLATFORMS = [
   { value: "facebook", label: "Facebook", icon: "Facebook" },