[WIP]: Refactor localization demo page. Missing to update info layer with...

[WIP]: Refactor localization demo page. Missing to update info layer with localization. Also there is an issue when value is not given to Dropzone component

src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx

@@ -15,23 +15,21 @@ const BasicDropzoneCode = ({ splittedOnly = false }) => {
 export default BasicDropzoneCode;
 
 const splittedCodeJS = `<Dropzone
-  style={{ minWidth: "505px" }}
   onChange={updateFiles}
   value={files}
 >
   {files.length > 0 &&
     files.map((file) => (
-      <FileMosaic key={file.id} {...file} onDelete={removeFile} info alwaysActive/>
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
     ))}
 </Dropzone>`;
 const splittedCodeTS = `<Dropzone
-  style={{ minWidth: "505px" }}
   onChange={updateFiles}
   value={files}
 >
   {files.length > 0 &&
     files.map((file: ExtFile) => (
-      <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true} alwaysActive={true}/>
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true}/>
     ))}
 </Dropzone>`;
 const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";

src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx

@@ -11,21 +11,11 @@ export default function BasicDemoDropzone() {
   const removeFile = (id) => {
     setFiles(files.filter((x) => x.id !== id));
   };
-  return ( 
-    <Dropzone
-      //style={{ minWidth: "505px" }}
-      onChange={updateFiles}
-      value={files}
-    >
+  return (
+    <Dropzone onChange={updateFiles} value={files}>
       {files.length > 0 &&
         files.map((file) => (
-          <FileMosaic
-            key={file.id}
-            {...file}
-            onDelete={removeFile}
-            info
-            alwaysActive
-          />
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
         ))}
     </Dropzone>
   );

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

 import * as React from "react";
-import { Dropzone, ExtFile, FileMosaic, Localization } from "../../../files-ui";
+import {
+  Dropzone,
+  ExtFile,
+  FileMosaic,
+  Localization,
+  FileInputButton,
+  FileCard,
+} from "../../../files-ui";
 import { Autocomplete, TextField } from "@mui/material";
-
+import "./DemoLocalization.scss";
 const DemoFileMosaicLocalization = (props: { card: boolean }) => {
   const [localization, setLocalization] = React.useState<
     Localization | undefined
@@ -11,7 +18,6 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
     console.log(value);
     setLocalization(value?.value);
   };
-  if (props.card) return <></>;
   return (
     <>
       <Autocomplete
@@ -25,55 +31,54 @@ const DemoFileMosaicLocalization = (props: { card: boolean }) => {
         getOptionLabel={(option) => option.language}
         renderInput={(params) => <TextField {...params} label="Localization" />}
       />
-      <div
-        style={{
-          display: "flex",
-          flexWrap: "wrap",
-          justifyContent: "center",
-          width: "100%",
-          gap: "50px",
-        }}
-      >
-        <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>
+      {props.card ? (
+        <div className="demo-localization-container-dz-fm">
+          <div className="demo-localization-item">
+            <FileInputButton
+              //style={{ width: "400px" }}
+              value={[]}
+              localization={localization}
+            ></FileInputButton>
+          </div>
+
+          <div className="demo-localization-item">
+            {extFiles.map((extFile, index) => (
+              <FileCard
+                key={index}
+                {...extFile}
+                localization={localization}
+                onDelete={() => {}}
+                info
+              />
+            ))}
+          </div>
         </div>
-       
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            flexGrow: 1,
-            flexWrap:"wrap"
-          }}
-        >
-          {extFiles.map((extFile, index) => (
-            <FileMosaic
-              key={index}
-              {...extFile}
+      ) : (
+        <div className="demo-localization-container-dz-fm">
+          <div className="demo-localization-item">
+            <Dropzone
+              value={extFiles}
+              accept={"image/*"}
+              maxFileSize={28*1024*1024}
+              maxFiles={10}
+              //style={{ width: "400px" }}
               localization={localization}
-              onDelete={() => {}}
-              info
-            />
-          ))}
+            ></Dropzone>
+          </div>
+
+          <div className="demo-localization-item">
+            {extFiles.map((extFile, index) => (
+              <FileMosaic
+                key={index}
+                {...extFile}
+                localization={localization}
+                onDelete={() => {}}
+                info
+              />
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </>
   );
 };

src/components/demo-components/filemosaic-demo/DemoLocalization.scss

+.demo-localization-container-dz-fm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+
+  .demo-localization-item {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1px;
+  }
+  @media (max-width: 960px) {
+    flex-direction: column;
+    .demo-localization-item {
+      width: 100%;
+    }
+  }
+}
+
+.demo-localization-container-fib-fc {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  .demo-localization-item {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1px;
+  }
+  @media (max-width: 960px) {
+    .demo-localization-item {
+      width: 100%;
+    }
+  }
+}

src/components/switch/FileCardMosaicSwitch.jsx

@@ -9,6 +9,7 @@ export default function FileCardMosaicSwitch({
   value,
   onChange,
   withInput = false,
+  row = false,
 }) {
   //const [value, setValue] = React.useState('female');
 
@@ -25,7 +26,7 @@ export default function FileCardMosaicSwitch({
         name="controlled-radio-buttons-group"
         value={value}
         onChange={handleChange}
-        row="horizontal"
+        row={row ? undefined : "horizontal"}
       >
         <FormControlLabel
           value="FileMosaic"

src/pages/localization/LocalizationPage.jsx

@@ -62,11 +62,12 @@ const LocalizationPage = (props) => {
               value={component}
               onChange={handleChangeComponent}
               withInput
+              row
             />
             <Paper
               variant="outlined"
               style={{
-                padding: "25px",
+                padding: "25px 10px",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",