[WIP]: Add Localization page and demo in progress. Missing to add the other...

[WIP]: Add Localization page and demo in progress. Missing to add the other combination of components. Maybe Avatar will be needed to be added. Maybe like the main page

src/components/MainMenu/MainMenuSideBar.tsx

@@ -11,7 +11,7 @@ import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
 import { useNavigateToTop } from "../../hooks/useNavigateToTop";
 
 export default function MainMenuSideBar(props: MainMenuSideBarProps) {
-  const { /* items, */ selectedIndex, /* setSelectedIndex */ } = props;
+  const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
   const navigate = useNavigateToTop();
 
   const quickStartItemsIni: MainMenuSideBarItems[] = [
@@ -110,29 +110,34 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
         },
       ],
     },
-     {
+    {
       label: "File icons",
       index: 4,
       onClick: () => navigate("/file-icons"),
     },
     {
-      label: "Server side",
+      label: "Localization",
       index: 5,
+      onClick: () => navigate("/localization"),
+    },
+    {
+      label: "Server side",
+      index: 6,
       onClick: () => navigate("/server-side"),
     },
     {
       label: "Code Generator",
-      index: 6,
+      index: 7,
       onClick: () => navigate("/code-generator"),
     },
     {
       label: "Types",
-      index: 7,
+      index: 8,
       onClick: () => navigate("/types"),
     },
     {
       label: "Utilities Methods",
-      index: 8,
+      index: 9,
       subMenu: [
         {
           label: "File readers",
@@ -145,7 +150,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
           index: 82,
           onClick: () => navigate("/utilities-methods/file-uploader"),
         },
-        
+
         {
           label: "File download",
           index: 83,
@@ -155,7 +160,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
     },
   ];
 
-  const [quickStartItems, /* setQuickStartItems */] =
+  const [quickStartItems /* setQuickStartItems */] =
     React.useState(quickStartItemsIni);
 
   const [regularItems, setRegularItemsIni] = React.useState(
@@ -164,11 +169,11 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
     })
   );
 
-/*   const handleClick = () => {
+  /*   const handleClick = () => {
     //setOpen(!open);
   }; */
 
-/*   const handleCLickItem = (
+  /*   const handleCLickItem = (
     e: React.MouseEvent<HTMLDivElement, MouseEvent>,
     onClick: Function | undefined
   ): void => {
@@ -288,7 +293,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
                 <ListItemButton
                   style={{ padding: "2px 20px" }}
                   key={indexBase}
-                 // selected={subMenu === undefined && selectedIndex === index}
+                  // selected={subMenu === undefined && selectedIndex === index}
                   selected={isOpen && selectedIndex === index}
                   onClick={(event) =>
                     handleListItemClick(

src/components/demo-components/filemosaic-demo/DemoFileMosaicLocalization.tsx

 import * as React from "react";
-import { ExtFile, FileMosaic, Localization } from "../../../files-ui";
+import { Dropzone, ExtFile, FileMosaic, Localization } from "../../../files-ui";
 import { Autocomplete, TextField } from "@mui/material";
 
-const DemoFileMosaicLocalization = () => {
+const DemoFileMosaicLocalization = (props: { card: boolean }) => {
   const [localization, setLocalization] = React.useState<
     Localization | undefined
   >(undefined);
@@ -11,7 +11,7 @@ const DemoFileMosaicLocalization = () => {
     console.log(value);
     setLocalization(value?.value);
   };
-
+  if (props.card) return <></>;
   return (
     <>
       <Autocomplete
@@ -29,20 +29,50 @@ const DemoFileMosaicLocalization = () => {
         style={{
           display: "flex",
           flexWrap: "wrap",
-          justifyContent: "space-evenly",
+          justifyContent: "center",
           width: "100%",
           gap: "50px",
         }}
       >
-        {extFiles.map((extFile, index) => (
-          <FileMosaic
-            key={index}
-            {...extFile}
-            localization={localization}
-            onDelete={() => {}}
-            info
-          />
-        ))}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flexGrow: 1,
+            flexWrap:"wrap"
+          }}
+        >
+           <Dropzone
+          /* style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flexGrow: 1,
+          }} */
+          localization={localization}
+        ></Dropzone>
+        </div>
+       
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flexGrow: 1,
+            flexWrap:"wrap"
+          }}
+        >
+          {extFiles.map((extFile, index) => (
+            <FileMosaic
+              key={index}
+              {...extFile}
+              localization={localization}
+              onDelete={() => {}}
+              info
+            />
+          ))}
+        </div>
       </div>
     </>
   );

src/components/switch/FileCardMosaicSwitch.jsx

-import * as React from 'react';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
+import * as React from "react";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
 
-export default function FileCardMosaicSwitch({value, onChange}) {
+export default function FileCardMosaicSwitch({
+  value,
+  onChange,
+  withInput = false,
+}) {
   //const [value, setValue] = React.useState('female');
 
   const handleChange = (event) => {
     //setValue(event.target.value);
-    onChange?.(event.target.value)
+    onChange?.(event.target.value);
   };
 
   return (
@@ -23,8 +27,16 @@ export default function FileCardMosaicSwitch({value, onChange}) {
         onChange={handleChange}
         row="horizontal"
       >
-        <FormControlLabel value="FileMosaic" control={<Radio />} label={"<FileMosaic/>"} />
-        <FormControlLabel value="FileCard" control={<Radio />} label="<FileCard/>" />
+        <FormControlLabel
+          value="FileMosaic"
+          control={<Radio />}
+          label={withInput ? "<FileMosaic/> & <Dropzone/>" : "<FileMosaic/>"}
+        />
+        <FormControlLabel
+          value="FileCard"
+          control={<Radio />}
+          label={withInput ? "<FileCard/> & <FileCard/>" : "<FileCard/>"}
+        />
       </RadioGroup>
     </FormControl>
   );

src/pages/demo/FileMosaicDemoPage.jsx

@@ -355,71 +355,6 @@ const FileMosaicDemoPage = (props) => {
           <CodeJSFileMosaicSmartImgFit />
         </section>
 
-        {/*   <section id="localization">
-          <SubTitle content="Localization" />
-          <DescParagraph>
-            The <CodeHighlight>FileMosaic</CodeHighlight> component has
-            multilanguage support. You can change the language in wich labels
-            are displayed by setting the{" "}
-            <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
-            the following languages are supported:
-            <ul>
-              {[
-                "English",
-                "Spanish",
-                "French",
-                "Italian",
-                "Portuguese",
-                "Russian",
-                "Chinnese (simplified)",
-                "Chinnese (traditional)",
-              ].map((x) => (
-                <li>
-                  <TypeHighlight>{x}</TypeHighlight>
-                </li>
-              ))}
-            </ul>
-          </DescParagraph>
-
-          <Paper
-            variant="outlined"
-            style={{
-              padding: "25px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexDirection: "column",
-              gap: "20px",
-            }}
-          >
-            <DemoFileMosaicLocalization />
-          </Paper>
-          <CodeJSFileMosaicLocalization />
-        </section> */}
-
-        {/*  <section id="file-icon">
-          <SubTitle content="File Icons (extensive list)" />
-          <DescParagraph>
-            The <CodeHighlight>FileMosaic</CodeHighlight> component supports
-            several file types to properly set a file icon. The complete list of
-            file icons is the following:
-          </DescParagraph>
-          <Paper
-            variant="outlined"
-            style={{
-              padding: "25px 0",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              //flexDirection: "column",
-              gap: "10px",
-              flexWrap: "wrap",
-            }}
-          >
-            <DemoFileMosaicFileIcons />
-          </Paper>
-        </section> */}
-
         <section id="api">
           <SubTitle content="API" />
           <DescParagraph>

src/pages/localization/LocalizationPage.jsx

+import * as React from "react";
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
+import Paper from "@mui/material/Paper";
+import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import DemoFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/DemoFileMosaicLocalization";
+import CodeJSFileMosaicLocalization from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicLocalization";
+
+const LocalizationPage = (props) => {
+  const [component, setComponent] = React.useState("FileMosaic");
+  const handleChangeComponent = (newVal) => {
+    setComponent(newVal);
+  };
+  return (
+    <React.Fragment>
+      <MainLayoutPage selectedIndex={5}>
+        <MainContentContainer>
+          <MainTitle>Localization</MainTitle>
+          <MainParagraph>
+            Localization (also referred to as "l10n") is the process of adapting
+            a product or content to a specific locale or market.
+            <br />
+            The default locale of Files UI is English. If you want to use other
+            locales, follow the instructions below.
+          </MainParagraph>
+
+          <section id="locale-text">
+            <SubTitle content="Locale texts" />
+            <DescParagraph>
+              Files UI components have multilanguage support. You can change the
+              language in wich labels are displayed by setting the{" "}
+              <CodeHighlight>{"localization"}</CodeHighlight> prop. So far only
+              the following languages are supported:
+              <ul>
+                {[
+                  "English",
+                  "Spanish",
+                  "French",
+                  "Italian",
+                  "Portuguese",
+                  "Russian",
+                  "Chinnese (simplified)",
+                  "Chinnese (traditional)",
+                ].map((x) => (
+                  <li>
+                    <TypeHighlight>{x}</TypeHighlight>
+                  </li>
+                ))}
+              </ul>
+            </DescParagraph>
+            <FileCardMosaicSwitch
+              value={component}
+              onChange={handleChangeComponent}
+              withInput
+            />
+            <Paper
+              variant="outlined"
+              style={{
+                padding: "25px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column",
+                gap: "20px",
+              }}
+            >
+              <DemoFileMosaicLocalization card={component === "FileCard"} />
+            </Paper>
+            <CodeJSFileMosaicLocalization card={component === "FileCard"} />
+          </section>
+
+          <RightMenuContainer>
+            <RightMenu width="240px" items={rightMenuItems} />
+          </RightMenuContainer>
+        </MainContentContainer>
+      </MainLayoutPage>
+    </React.Fragment>
+  );
+};
+export default LocalizationPage;
+
+const rightMenuItems = [
+  {
+    id: 0,
+    label: "Complete list",
+    referTo: "/file-icons#complete-list",
+  },
+];

src/routes/MainRouter.jsx

@@ -22,6 +22,7 @@ import AvatarApi from "../pages/api/AvatarApi";
 import FileInputButtonDemoPage from "../pages/demo/FileInputButtonDemoPage";
 import FileDownloadPage from "../pages/download-page/FileDownloadPage";
 import FileIconsPage from "../pages/file-icons/FileIconsPage";
+import LocalizationPage from "../pages/localization/LocalizationPage";
 
 const router = createBrowserRouter([
   {
@@ -105,6 +106,10 @@ const router = createBrowserRouter([
     path: "/file-icons",
     element: <FileIconsPage />,
   },
+  {
+    path: "/localization",
+    element: <LocalizationPage />,
+  },
   {
     path: "/server-side",
     element: <ServerSidePage />,