@firecms/core 3.1.0-canary.1df3b2c → 3.1.0-canary.501d471

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -12,6 +12,7 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import { ClearFilterSortButton } from "../ClearFilterSortButton";
 import { FiltersDialog } from "./FiltersDialog";
 import { Badge, Button, cls, FilterListIcon, IconButton, Tooltip } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
     collection: EntityCollection<M>;
@@ -42,6 +43,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins ?? [];
     const largeLayout = useLargeLayout();
+    const { t } = useTranslation();
 
     // Filters dialog state
     const [filtersDialogOpen, setFiltersDialogOpen] = useState(false);
@@ -66,7 +68,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
 
     // Filters button
     const filtersButton = resolvedProperties && tableController.setFilterValues && (
-        <Tooltip title="Filters"
+        <Tooltip title={t("filters")}
             key={"filters_tooltip"}>
             <Badge
                 color="primary"
@@ -80,7 +82,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
                         startIcon={<FilterListIcon size="small" />}
                         className={cls(activeFilterCount > 0 && "text-primary")}
                     >
-                        Filters{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
+                        {t("filters")}{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
                     </Button>
                 ) : (
                     <IconButton

package/src/components/EntityCollectionView/FiltersDialog.tsx

@@ -15,6 +15,7 @@ import {
     FilterListIcon,
     Typography
 } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 import { StringNumberFilterField } from "../SelectableTable/filters/StringNumberFilterField";
 import { BooleanFilterField } from "../SelectableTable/filters/BooleanFilterField";
 import { DateTimeFilterField } from "../SelectableTable/filters/DateTimeFilterField";
@@ -43,6 +44,8 @@ export function FiltersDialog({
     setFilterValues,
     forceFilter
 }: FiltersDialogProps) {
+    const { t } = useTranslation();
+    
     // Local state for filters being edited
     const [localFilters, setLocalFilters] = useState<FilterValues<any>>(filterValues ?? {});
 
@@ -173,7 +176,7 @@ export function FiltersDialog({
             containerClassName={isAnyFieldHidden ? "hidden" : undefined}
         >
             <DialogTitle className="flex items-center gap-2">
-                <Typography variant="h6">Filters</Typography>
+                <Typography variant="h6">{t("filters")}</Typography>
                 {activeFilterCount > 0 && (
                     <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-primary text-white">
                         {activeFilterCount}
@@ -184,7 +187,7 @@ export function FiltersDialog({
             <DialogContent >
                 {filterableProperties.length === 0 ? (
                     <Typography color="secondary" className="py-8 text-center">
-                        No filterable properties available
+                        {t("no_filterable_properties")}
                     </Typography>
                 ) : (
                     <table className="w-full border-collapse">
@@ -228,20 +231,20 @@ export function FiltersDialog({
                     onClick={handleClearAll}
                     disabled={activeFilterCount === 0}
                 >
-                    Clear all
+                    {t("clear")}
                 </Button>
                 <div className="flex-grow" />
                 <Button
                     variant="text"
                     onClick={() => onOpenChange(false)}
                 >
-                    Cancel
+                    {t("cancel")}
                 </Button>
                 <Button
                     variant="filled"
                     onClick={handleApply}
                 >
-                    Apply filters
+                    {t("apply_filters")}
                 </Button>
             </DialogActions>
         </Dialog>

package/src/components/EntityCollectionView/ViewModeToggle.tsx

@@ -12,6 +12,7 @@ import {
     ViewColumnIcon,
     ViewKanbanIcon
 } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type KanbanPropertyOption = {
     key: string;
@@ -22,16 +23,11 @@ export type ViewModeToggleProps = {
     viewMode?: ViewMode;
     onViewModeChange?: (mode: ViewMode) => void;
     /**
-     * Whether Kanban view mode is available for this collection.
-     * Should be true when collection.kanban is set with a valid enum property.
+     * Which view modes are enabled for this collection.
+     * Only these modes will appear in the toggle.
+     * Defaults to all three: ["table", "cards", "kanban"].
      */
-    kanbanEnabled?: boolean;
-    /**
-     * Whether a plugin exists that can configure Kanban (e.g., collection editor).
-     * When true, Kanban option is always shown (enabled or not based on kanbanEnabled).
-     * When false, Kanban option is shown but disabled.
-     */
-    hasKanbanConfigPlugin?: boolean;
+    enabledViews?: ViewMode[];
     /**
      * Current size for card/table views
      */
@@ -62,11 +58,12 @@ export type ViewModeToggleProps = {
     onKanbanPropertyChange?: (property: string) => void;
 }
 
+const ALL_VIEW_MODES: ViewMode[] = ["table", "cards", "kanban"];
+
 export function ViewModeToggle({
     viewMode = "table",
     onViewModeChange,
-    kanbanEnabled = false,
-    hasKanbanConfigPlugin = false,
+    enabledViews = ALL_VIEW_MODES,
     size,
     onSizeChanged,
     open,
@@ -76,6 +73,8 @@ export function ViewModeToggle({
     onKanbanPropertyChange
 }: ViewModeToggleProps) {
 
+    const { t } = useTranslation();
+
     if (!onViewModeChange) {
         return null;
     }
@@ -88,44 +87,44 @@ export function ViewModeToggle({
     };
 
     const getViewModeName = () => {
-        if (viewMode === "kanban") return "Board";
-        if (viewMode === "cards") return "Cards";
-        return "List";
+        if (viewMode === "kanban") return t("board");
+        if (viewMode === "cards") return t("cards");
+        return t("list");
     };
 
-    const showKanban = kanbanEnabled || hasKanbanConfigPlugin;
     const showSizeSelector = size && onSizeChanged && (viewMode === "table" || viewMode === "cards");
     const showKanbanPropertySelector = viewMode === "kanban" &&
         kanbanPropertyOptions &&
         kanbanPropertyOptions.length > 0 &&
         onKanbanPropertyChange;
 
-    // Build toggle options dynamically based on kanban availability
+    // Build toggle options based on enabledViews
     const viewModeOptions: ToggleButtonOption<ViewMode>[] = useMemo(() => {
-        const options: ToggleButtonOption<ViewMode>[] = [
+        const allOptions: ToggleButtonOption<ViewMode>[] = [
             {
                 value: "table",
-                label: "List",
+                label: t("list"),
                 icon: <ListIcon size="small" />
             },
             {
                 value: "cards",
-                label: "Cards",
+                label: t("cards"),
                 icon: <AppsIcon size="small" />
+            },
+            {
+                value: "kanban",
+                label: t("board"),
+                icon: <ViewKanbanIcon size="small" />
             }
         ];
 
-        if (showKanban) {
-            options.push({
-                value: "kanban",
-                label: "Board",
-                icon: <ViewKanbanIcon size="small" />,
-                disabled: !kanbanEnabled && !hasKanbanConfigPlugin
-            });
-        }
+        return allOptions.filter(option => enabledViews.includes(option.value));
+    }, [enabledViews]);
 
-        return options;
-    }, [showKanban, kanbanEnabled, hasKanbanConfigPlugin]);
+    // Don't render if only one view is enabled
+    if (viewModeOptions.length <= 1 && !showSizeSelector) {
+        return null;
+    }
 
     return (
         <Popover
@@ -141,18 +140,20 @@ export function ViewModeToggle({
         >
             <div className="p-3 flex flex-col gap-3 min-w-[240px]">
                 {/* View mode toggle using ToggleButtonGroup */}
-                <ToggleButtonGroup
-                    value={viewMode}
-                    onValueChange={onViewModeChange}
-                    options={viewModeOptions}
-                />
+                {viewModeOptions.length > 1 && (
+                    <ToggleButtonGroup
+                        value={viewMode}
+                        onValueChange={onViewModeChange}
+                        options={viewModeOptions}
+                    />
+                )}
 
                 {/* Size selector */}
                 {showSizeSelector && (
                     <div className="flex flex-row items-center justify-between gap-2">
                         <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
                             <ViewColumnIcon size="small" />
-                            <span>Size</span>
+                            <span>{t("size_label")}</span>
                         </div>
                         <Select
                             value={size}
@@ -175,7 +176,7 @@ export function ViewModeToggle({
                     <div className="flex flex-row items-center justify-between gap-2">
                         <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
                             <ViewKanbanIcon size="small" />
-                            <span>Group by</span>
+                            <span>{t("group_by")}</span>
                         </div>
                         <Select
                             value={selectedKanbanProperty}
@@ -199,4 +200,3 @@ export function ViewModeToggle({
         </Popover>
     );
 }
-

package/src/components/EntityJsonPreview.tsx

@@ -1,9 +1,10 @@
 import React, { useRef } from "react";
 import { Highlight, themes } from "prism-react-renderer";
 import { useModeController } from "../hooks";
+import { jsonStringifyReplacer } from "../util/objects";
 
 export function EntityJsonPreview({ values }: { values: object }) {
-    const code = JSON.stringify(values, null, "\t");
+    const code = JSON.stringify(values, jsonStringifyReplacer, "\t");
     const { mode } = useModeController();
     const preRef = useRef<HTMLPreElement>(null);
 

package/src/components/EntityView.tsx

@@ -4,7 +4,7 @@ import { resolveCollection } from "../util";
 import { cls, defaultBorderMixin, IconButton, OpenInNewIcon, Typography } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
-import { useAuthController } from "../hooks";
+import { useAuthController, useTranslation } from "../hooks";
 import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
@@ -26,6 +26,7 @@ export function EntityView<M extends Record<string, any>>(
     }: EntityViewProps<M>) {
 
     const authController = useAuthController();
+    const { t } = useTranslation();
     const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
@@ -48,7 +49,7 @@ export function EntityView<M extends Record<string, any>>(
                                     color={"secondary"}
                                     component={"span"}
                                     className="break-words">
-                            Id
+                            {t("id")}
                         </Typography>
                     </div>
                     <div className="col-span-8">

package/src/components/ErrorBoundary.tsx

@@ -1,18 +1,20 @@
 import React, { ErrorInfo, PropsWithChildren } from "react";
+import { useTranslation } from "../hooks/useTranslation";
 
 import { ErrorIcon, Typography } from "@firecms/ui";
 
 export class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
-    error: Error | null
+    hasError: boolean,
+    error?: Error
 }> {
     constructor(props: any) {
         super(props);
-        this.state = { error: null };
+        this.state = { hasError: false };
     }
 
     // eslint-disable-next-line n/handle-callback-err
     static getDerivedStateFromError(error: Error) {
-        return { error };
+        return { hasError: true, error };
     }
 
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -21,20 +23,30 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
     }
 
     render() {
-        if (this.state.error) {
-            return (
-                <div className="flex flex-col m-2">
-                    <div className="flex items-center m-2">
-                        <ErrorIcon color={"error"} size={"small"}/>
-                        <div className="ml-4">Error</div>
-                    </div>
-                    <Typography variant={"caption"}>
-                        {this.state.error?.message ?? "See the error in the console"}
-                    </Typography>
-                </div>
-            );
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return <FallbackView message={this.state.error?.message}/>;
         }
 
         return this.props.children;
     }
 }
+
+function FallbackView({ message }: { message?: string }) {
+    const { t } = useTranslation();
+    return (
+        <div className="h-full w-full bg-slate-100 dark:bg-surface-900 flex items-center justify-center p-4">
+            <div
+                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-surface-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-surface-700">
+                <div className="flex items-center mb-4 text-red-500 dark:text-red-400">
+                    <ErrorIcon/>
+                    <div className="ml-4">{t("error")}</div>
+                </div>
+                <div className="flex justify-center text-gray-500 dark:text-gray-400">
+                    {/* Error message is purposely removed since it's hard to access state here, but typical ErrorBoundary fallback doesn't always show the raw message */}
+                    {t("see_console_details")}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/HomePage/DefaultHomePage.tsx

@@ -30,8 +30,13 @@ import { NavigationCardBinding } from "./NavigationCardBinding";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { RenameGroupDialog } from "./RenameGroupDialog";
+import { useTranslation } from "../../hooks/useTranslation";
 
-export const DEFAULT_GROUP_NAME = "Views";
+/**
+ * Internal sentinel key for ungrouped navigation entries.
+ * Not displayed — display components use t("views_group") when group is undefined.
+ */
+const DEFAULT_GROUP_KEY = "__default__";
 export const ADMIN_GROUP_NAME = "Admin";
 
 export function DefaultHomePage({
@@ -47,6 +52,7 @@ export function DefaultHomePage({
     const context = useFireCMSContext();
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
+    const { t } = useTranslation();
 
     if (!navigationController.topLevelNavigation)
         throw Error("Navigation not ready");
@@ -108,7 +114,7 @@ export function DefaultHomePage({
             const g =
                 e.type === "admin"
                     ? ADMIN_GROUP_NAME
-                    : e.group ?? DEFAULT_GROUP_NAME;
+                    : e.group ?? DEFAULT_GROUP_KEY;
             (entriesByGroup[g] ??= []).push(e);
         });
 
@@ -119,7 +125,7 @@ export function DefaultHomePage({
 
         if (performingSearch) {
             const ordered = [
-                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_NAME))
+                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_KEY))
             ];
             allProcessed = ordered
                 .map((name) => ({
@@ -129,11 +135,11 @@ export function DefaultHomePage({
                 .filter((g) => g.entries.length);
         } else {
             allProcessed = groupOrderFromNavController.map((g) => ({
-                name: g,
-                entries: entriesByGroup[g] || []
+                name: g ?? DEFAULT_GROUP_KEY,
+                entries: entriesByGroup[g ?? DEFAULT_GROUP_KEY] || []
             }));
             Object.keys(entriesByGroup).forEach((g) => {
-                if (!groupOrderFromNavController.includes(g))
+                if (!groupOrderFromNavController.map(x => x ?? DEFAULT_GROUP_KEY).includes(g))
                     allProcessed.push({
                         name: g,
                         entries: entriesByGroup[g]
@@ -141,9 +147,9 @@ export function DefaultHomePage({
             });
 
             // Ensure default group exists if there are plugin additional cards but no collections
-            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_NAME)) {
+            if (hasPluginAdditionalCards && !allProcessed.some(g => g.name === DEFAULT_GROUP_KEY)) {
                 allProcessed.push({
-                    name: DEFAULT_GROUP_NAME,
+                    name: DEFAULT_GROUP_KEY,
                     entries: []
                 });
             }
@@ -151,7 +157,7 @@ export function DefaultHomePage({
             allProcessed = allProcessed.filter(
                 (g) =>
                     g.entries.length ||
-                    (g.name === DEFAULT_GROUP_NAME && hasPluginAdditionalCards)
+                    (g.name === DEFAULT_GROUP_KEY && hasPluginAdditionalCards)
             );
         }
 
@@ -362,7 +368,7 @@ export function DefaultHomePage({
                 >
                     <SearchBar
                         onTextSearch={updateSearch}
-                        placeholder="Search collections"
+                        placeholder={t("search_collections")}
                         autoFocus
                         innerClassName="w-full"
                         className="w-full flex-grow"
@@ -412,7 +418,7 @@ export function DefaultHomePage({
 
                             const actionProps: PluginHomePageAdditionalCardsProps = {
                                 group:
-                                    groupKey === DEFAULT_GROUP_NAME
+                                    groupKey === DEFAULT_GROUP_KEY
                                         ? undefined
                                         : groupKey,
                                 context
@@ -432,7 +438,7 @@ export function DefaultHomePage({
                                 >
                                     <NavigationGroup
                                         group={
-                                            groupKey === DEFAULT_GROUP_NAME
+                                            groupKey === DEFAULT_GROUP_KEY
                                                 ? undefined
                                                 : groupKey
                                         }
@@ -535,7 +541,7 @@ export function DefaultHomePage({
                                 <NavigationGroup
                                     group={
                                         activeGroupData.name ===
-                                            DEFAULT_GROUP_NAME
+                                            DEFAULT_GROUP_KEY
                                             ? undefined
                                             : activeGroupData.name
                                     }

package/src/components/HomePage/HomePageDnD.tsx

@@ -30,6 +30,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { NavigationCardBinding } from "./NavigationCardBinding";
 import { NavigationEntry } from "../../types";
 import { cls, defaultBorderMixin } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
 
 const animateLayoutChanges: AnimateLayoutChanges = (args) =>
     defaultAnimateLayoutChanges({
@@ -669,6 +670,7 @@ export function NewGroupDropZone({
     disabled: boolean;
     setIsHovering: (v: boolean) => void;
 }) {
+    const { t } = useTranslation();
     const {
         setNodeRef,
         isOver
@@ -709,7 +711,7 @@ export function NewGroupDropZone({
             )}>
             <div className="text-center p-4">
                 <span className="block font-medium text-sm">
-                    Drop here to create a new group
+                    {t("drop_here_create_group")}
                 </span>
             </div>
         </div>

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useState } from "react";
 import { cls, EditIcon, IconButton, Typography, ExpandablePanel } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export function NavigationGroup({
     children,
@@ -22,8 +23,9 @@ export function NavigationGroup({
     onToggleCollapsed?: () => void;
 }>) {
 
+    const { t } = useTranslation();
     const [isHovered, setIsHovered] = useState(false);
-    const currentGroupName = group ?? "Views";
+    const currentGroupName = group ?? t("views_group");
 
     // Show caret only when not in preview and there is a toggle handler
     const showCaret = !isPreview && !!onToggleCollapsed;

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 interface RenameGroupDialogProps {
     open: boolean;
@@ -18,7 +19,8 @@ export function RenameGroupDialog({
                                   }: RenameGroupDialogProps) {
     const [name, setName] = useState(initialName);
     const [error, setError] = useState<string | null>(null);
-    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (open) {
@@ -38,9 +40,9 @@ export function RenameGroupDialog({
         const newName = event.target.value;
         setName(newName);
         if (!newName.trim()) {
-            setError("Group name cannot be empty.");
+            setError(t("group_name_empty_error"));
         } else if (existingGroupNames.includes(newName.trim())) {
-            setError("This group name already exists.");
+            setError(t("group_name_exists_error"));
         } else {
             setError(null);
         }
@@ -49,11 +51,11 @@ export function RenameGroupDialog({
     const handleSave = () => {
         const trimmedName = name.trim();
         if (!trimmedName) {
-            setError("Group name cannot be empty.");
+            setError(t("group_name_empty_error"));
             return;
         }
         if (existingGroupNames.includes(trimmedName)) {
-            setError("This group name already exists.");
+            setError(t("group_name_exists_error"));
             return;
         }
         if (!error) {
@@ -70,9 +72,9 @@ export function RenameGroupDialog({
             // because the error state might not have updated if the user types and immediately hits enter.
             let currentError = null;
             if (!trimmedName) {
-                currentError = "Group name cannot be empty.";
+                currentError = t("group_name_empty_error");
             } else if (existingGroupNames.includes(trimmedName)) {
-                currentError = "This group name already exists.";
+                currentError = t("group_name_exists_error");
             }
 
             if (!currentError && trimmedName) {
@@ -93,14 +95,14 @@ export function RenameGroupDialog({
 
     return (
         <Dialog open={open}>
-            <DialogTitle>Rename Group</DialogTitle>
+            <DialogTitle>{t("rename_group")}</DialogTitle>
             <DialogContent>
                 <TextField
-                    inputRef={inputRef} // Pass the ref to the TextField
-                    label="Group Name"
+                    inputRef={inputRef}
+                    label={t("group_name_label")}
                     value={name}
                     onChange={handleNameChange}
-                    onKeyDown={handleKeyDown} // Added onKeyDown handler
+                    onKeyDown={handleKeyDown}
                     error={!!error}
                     aria-describedby={error ? "group-name-error" : undefined}
                 />
@@ -109,11 +111,11 @@ export function RenameGroupDialog({
             <DialogActions>
                 <Button onClick={onClose}
                         variant="text">
-                    Cancel
+                    {t("cancel")}
                 </Button>
                 <Button onClick={handleSave}
                         disabled={!!error || !name.trim()}>
-                    Save
+                    {t("save")}
                 </Button>
             </DialogActions>
         </Dialog>

package/src/components/LanguageToggle.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { CheckIcon, IconButton, Menu, MenuItem, TranslateIcon, Typography } from "@firecms/ui";
+import { useTranslation } from "../hooks";
+
+export function LanguageToggle() {
+    const { i18n } = useTranslation();
+
+    return (
+        <Menu
+            trigger={<IconButton
+                color="inherit"
+                aria-label="Change language">
+                <TranslateIcon size="small" />
+            </IconButton>}>
+            <MenuItem onClick={() => i18n.changeLanguage("en")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "en" ? "font-bold" : ""}>English</Typography>
+                    {i18n.language === "en" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("es")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "es" ? "font-bold" : ""}>Español</Typography>
+                    {i18n.language === "es" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("de")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "de" ? "font-bold" : ""}>Deutsch</Typography>
+                    {i18n.language === "de" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("fr")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "fr" ? "font-bold" : ""}>Français</Typography>
+                    {i18n.language === "fr" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("it")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "it" ? "font-bold" : ""}>Italiano</Typography>
+                    {i18n.language === "it" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("hi")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "hi" ? "font-bold" : ""}>हिन्दी</Typography>
+                    {i18n.language === "hi" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("pt")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "pt" ? "font-bold" : ""}>Português</Typography>
+                    {i18n.language === "pt" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+        </Menu>
+    );
+}