[FEAT]: Add Dropzone demo styling and code

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

+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneStyling = ({ splittedOnly = false }) => {
+  return (
+    <ShowDemoCode
+      splittedOnly={splittedOnly}
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoDropzoneStyling;
+
+const splittedCodeJS = `<Dropzone color="#6200EE">{/** files */}</Dropzone>
+<Dropzone
+    minHeight="120px"
+    header={false}
+    footer={false}
+>
+    {/** files */}
+</Dropzone>
+<Dropzone
+    background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+>
+    {/** files */}
+</Dropzone>`;
+const splittedCodeTS = `<Dropzone color="#6200EE">{/** files */}</Dropzone>
+<Dropzone
+    minHeight="120px"
+    header={false}
+    footer={false}
+>
+    {/** files */}
+</Dropzone>
+<Dropzone
+    background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+>
+    {/** files */}
+</Dropzone>`;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone, FileMosaic } from "@files-ui/react";
+
+export default function App() {
+  const [files, setFiles] = React.useState([]);
+  const updateFiles = (incommingFiles) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id) => {
+    setFiles(files.filter((x) => x.id !== id));
+  };
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-evenly",
+        gap: "20px",
+        flexWrap: "wrap",
+      }}
+    >
+        <Dropzone
+            style={{ width: "300px" }}
+            onChange={updateFiles}
+            value={files}
+            color="#6200EE"
+        >
+        {files.length > 0 &&
+            files.map((file) => (
+            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+            ))}
+        </Dropzone>
+        <Dropzone
+            style={{ width: "300px" }}
+            onChange={updateFiles}
+            value={files}
+            minHeight="120px"
+            header={false}
+            footer={false}
+        >
+        {files.length > 0 &&
+          files.map((file) => (
+            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+          ))}
+        </Dropzone>
+        <Dropzone
+            style={{ width: "300px" }}
+            onChange={updateFiles}
+            value={files}
+            background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+        >
+            {files.length > 0 &&
+            files.map((file) => (
+                <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+            ))}
+        </Dropzone>
+    </div>
+  );
+};`;
+
+const completeCodeTS = `import * as React from "react";
+import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+
+export default function App() {
+  const [files, setFiles] = React.useState<ExtFile[]>([]);
+  const updateFiles = (incommingFiles:ExtFile[]) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id: string | number | undefined) => {
+    setFiles(files.filter((x: ExtFile) => x.id !== id));
+  };
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-evenly",
+        gap: "20px",
+        flexWrap: "wrap",
+      }}
+    >
+        <Dropzone
+            style={{ width: "300px" }}
+            onChange={updateFiles}
+            value={files}
+            color="#6200EE"
+        >
+        {files.length > 0 &&
+            files.map((file: ExtFile) => (
+            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+            ))}
+        </Dropzone>
+        <Dropzone
+            style={{ width: "300px" }}
+            onChange={updateFiles}
+            value={files}
+            minHeight="120px"
+            header={false}
+            footer={false}
+        >
+        {files.length > 0 &&
+          files.map((file: ExtFile) => (
+            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+          ))}
+        </Dropzone>
+        <Dropzone
+            style={{ width: "300px" }}
+            onChange={updateFiles}
+            value={files}
+            background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+        >
+            {files.length > 0 &&
+            files.map((file: ExtFile) => (
+                <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+            ))}
+        </Dropzone>
+    </div>
+  );
+}`;

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

@@ -12,7 +12,14 @@ const DemoDropzoneStyling = (props) => {
     setFiles(files.filter((x) => x.id !== id));
   };
   return (
-    <div style={{ display: "flex" }}>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-evenly",
+        gap: "20px",
+        flexWrap: "wrap",
+      }}
+    >
       <Dropzone
         style={{ width: "300px" }}
         onChange={updateFiles}
@@ -28,7 +35,9 @@ const DemoDropzoneStyling = (props) => {
         style={{ width: "300px" }}
         onChange={updateFiles}
         value={files}
-        minHeight="100px"
+        minHeight="120px"
+        header={false}
+        footer={false}
       >
         {files.length > 0 &&
           files.map((file) => (
@@ -39,7 +48,7 @@ const DemoDropzoneStyling = (props) => {
         style={{ width: "300px" }}
         onChange={updateFiles}
         value={files}
-        backgroundColor="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
+        background="radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);"
       >
         {files.length > 0 &&
           files.map((file) => (

src/pages/demo/DropzoneDemoPage.jsx

@@ -31,6 +31,7 @@ import DemoDropzoneDropLayer from "../../components/demo-components/dropzone-dem
 import DemoDropzoneClickable from "../../components/demo-components/dropzone-demo/DemoDropzoneClickable";
 import DemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/DemoDropzoneDisabled";
 import DemoDropzoneRipple from "../../components/demo-components/dropzone-demo/DemoDropzoneRipple";
+import CodeDemoDropzoneStyling from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoStyling";
 
 const DropzoneDemoPage = (props) => {
   return (
@@ -444,15 +445,16 @@ const DropzoneDemoPage = (props) => {
                 defined will use this color for border, drop layer, font color
                 and ripple.
               </li>
-              <li>
-                Dropzone with the <TypeHighlight>backgroundColor</TypeHighlight>{" "}
-                prop defined will use this color for the background.
-              </li>
               <li>
                 Dropzone with the <TypeHighlight>minHeight</TypeHighlight> prop
                 defined will use this value to define the minimum height of the
                 component.
               </li>
+              <li>
+                Dropzone with the <TypeHighlight>background</TypeHighlight> prop
+                defined will use this value for the background. You can set nice
+                gradients or even a background image.
+              </li>
             </ul>
           </DescParagraph>
 
@@ -460,7 +462,7 @@ const DropzoneDemoPage = (props) => {
             <DemoDropzoneStyling />
           </Paper>
 
-          <CodeDemoDropzoneFooterConfig />
+          <CodeDemoDropzoneStyling />
         </section>
 
         <section id="ripple">