[FEAT]: Add File icons demo page with switch for changing between FileCard and FileMosaic

src/components/MainMenu/MainMenuSideBar.tsx

@@ -109,41 +109,46 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
           onClick: () => navigate("/api/avatar"),
         },
       ],
+    },
+     {
+      label: "File icons",
+      index: 4,
+      onClick: () => navigate("/file-icons"),
     },
     {
       label: "Server side",
-      index: 4,
+      index: 5,
       onClick: () => navigate("/server-side"),
     },
     {
       label: "Code Generator",
-      index: 5,
+      index: 6,
       onClick: () => navigate("/code-generator"),
     },
     {
       label: "Types",
-      index: 6,
+      index: 7,
       onClick: () => navigate("/types"),
     },
     {
       label: "Utilities Methods",
-      index: 7,
+      index: 8,
       subMenu: [
         {
           label: "File readers",
-          index: 71,
+          index: 81,
           onClick: () => navigate("/utilities-methods/file-reader"),
         },
 
         {
           label: "File uploader",
-          index: 72,
+          index: 82,
           onClick: () => navigate("/utilities-methods/file-uploader"),
         },
         
         {
           label: "File download",
-          index: 73,
+          index: 83,
           onClick: () => navigate("/utilities-methods/file-downloader"),
         },
       ],

src/components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons.jsx

 import * as React from "react";
-import { FileMosaic,createListOfMultiTypeFile } from "../../../files-ui";
+import {
+  FileMosaic,
+  createListOfMultiTypeFile,
+  FileCard,
+} from "../../../files-ui";
 
 /* const sampleFileProps = {
   id: "fileId",
@@ -7,7 +11,7 @@ import { FileMosaic,createListOfMultiTypeFile } from "../../../files-ui";
   type: "text/plain",
   name: "file created from props.jsx",
 }; */
-const DemoFileMosaicFileIcons = () => {
+const DemoFileMosaicFileIcons = ({ card }) => {
   const [files, setFiles] = React.useState([]);
 
   const removeFile = (id) => {
@@ -15,21 +19,30 @@ const DemoFileMosaicFileIcons = () => {
   };
 
   React.useEffect(() => {
-    const validateFiles = createListOfMultiTypeFile(28*1024*1024).map((x, index) => {
-      return {
-        id:index,
-        size: 28 * 1024 * 1024,
-        type: x.type,
-        name: x.name,
-      };
-    });
+    const validateFiles = createListOfMultiTypeFile(28 * 1024 * 1024).map(
+      (x, index) => {
+        return {
+          id: index,
+          size: 28 * 1024 * 1024,
+          type: x.type,
+          name: x.name,
+        };
+      }
+    );
     //console.log(validateFiles);
     setFiles(validateFiles);
   }, []);
   return (
     <>
       {files.map((f, index) => (
-        <FileMosaic {...f} key={f.id} onDelete={removeFile} info />
+        <>
+          {" "}
+          {card ? (
+            <FileCard {...f} key={f.id} onDelete={removeFile} info />
+          ) : (
+            <FileMosaic {...f} key={f.id} onDelete={removeFile} info />
+          )}
+        </>
       ))}
     </>
   );

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';
+
+export default function FileCardMosaicSwitch({value, onChange}) {
+  //const [value, setValue] = React.useState('female');
+
+  const handleChange = (event) => {
+    //setValue(event.target.value);
+    onChange?.(event.target.value)
+  };
+
+  return (
+    <FormControl>
+      <FormLabel id="demo-controlled-radio-buttons-group">Component</FormLabel>
+      <RadioGroup
+        aria-labelledby="demo-controlled-radio-buttons-group"
+        name="controlled-radio-buttons-group"
+        value={value}
+        onChange={handleChange}
+        row="horizontal"
+      >
+        <FormControlLabel value="FileMosaic" control={<Radio />} label={"<FileMosaic/>"} />
+        <FormControlLabel value="FileCard" control={<Radio />} label="<FileCard/>" />
+      </RadioGroup>
+    </FormControl>
+  );
+}

src/pages/file-icons/FileIconsPage.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";
+const FileIconsPage = (props) => {
+  const [component, setComponent] = React.useState("FileMosaic");
+  const handleChangeComponent = (newVal) => {
+    setComponent(newVal);
+  };
+  return (
+    <React.Fragment>
+      <MainLayoutPage selectedIndex={4}>
+        <MainContentContainer>
+          <MainTitle>File Icons (extensive list)</MainTitle>
+          <MainParagraph>
+            Both <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
+            <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a file icon
+            according to the file mime type. A media type (also known as a
+            Multipurpose Internet Mail Extensions or MIME type) indicates the
+            nature and format of a document, file, or assortment of bytes. You
+            can find more information{" "}
+            <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">
+              here
+            </AnchorToTab>
+            . Files UI supports at list the least this{" "}
+            <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types">
+              Common MIME types
+            </AnchorToTab>{" "}
+            and some other extra file types.
+          </MainParagraph>
+
+          <section id="complete-list">
+            <SubTitle content="Complete list" />
+            <DescParagraph>
+              Bellow you can see a preview of every file type supported:
+            </DescParagraph>
+            <FileCardMosaicSwitch
+              value={component}
+              onChange={handleChangeComponent}
+            />
+            <Paper
+              variant="outlined"
+              style={{
+                padding: "25px 0",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                //flexDirection: "column",
+                gap: "10px",
+                flexWrap: "wrap",
+              }}
+            >
+              <DemoFileMosaicFileIcons card={component === "FileCard"} />
+            </Paper>
+          </section>
+
+          <RightMenuContainer>
+            <RightMenu width="240px" items={rightMenuItems} />
+          </RightMenuContainer>
+        </MainContentContainer>
+      </MainLayoutPage>
+    </React.Fragment>
+  );
+};
+export default FileIconsPage;
+
+const rightMenuItems = [
+  {
+    id: 0,
+    label: "Complete list",
+    referTo: "/file-icons#complete-list",
+  },
+];

src/routes/MainRouter.jsx

@@ -21,6 +21,7 @@ import FileInputButtonApi from "../pages/api/FileInputButtonApi";
 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";
 
 const router = createBrowserRouter([
   {
@@ -100,6 +101,10 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: "/file-icons",
+    element: <FileIconsPage />,
+  },
   {
     path: "/server-side",
     element: <ServerSidePage />,