[FEAT]: Add demo and code components for clickable and Label sections

src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx

+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneClickable = ({ 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 CodeDemoDropzoneClickable;
+
+const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+<Dropzone style={{ width: "300px" }} clickable={false}>
+  {/**Files */}
+</Dropzone>`;
+
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone } from "@files-ui/react";
+
+const DemoDropzoneRipple = () => {
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-evenly",
+          gap: "40px",
+          flexWrap: "wrap",
+        }}
+      >
+        <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+        <Dropzone style={{ width: "300px" }} clickable={false}>
+            {/**Files */}
+        </Dropzone>
+      </div>
+    );
+  };
+  export default DemoDropzoneRipple;`;
+
+const completeCodeTS = completeCodeJS;

src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx

+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneLabel = ({ 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 CodeDemoDropzoneLabel;
+
+
+const splittedCodeJS = `<Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+<Dropzone
+  style={{ width: "300px" }}
+  label={"Files ui ❤️"}
+>
+  {/**Files */}
+</Dropzone>`;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone } from "@files-ui/react";
+
+const DemoDropzoneLabel = () => {
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-evenly",
+          gap: "40px",
+          flexWrap: "wrap",
+        }}
+      >
+        <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+        <Dropzone
+          style={{ width: "300px" }}
+          label={"Files ui ❤️"}
+        >
+          {/**Files */}
+        </Dropzone>
+      </div>
+    );
+  };
+  export default DemoDropzoneLabel;`;
+
+const completeCodeTS = completeCodeJS;
+

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

 import * as React from "react";
-import { Dropzone, FileMosaic } from "../../../files-ui";
+import { Dropzone } from "../../../files-ui";
 
 const DemoDropzoneClickable = (props) => {
-  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" }}>
-      <Dropzone style={{ width: "300px" }} onChange={updateFiles} value={files}>
-        {files.length > 0 &&
-          files.map((file) => (
-            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
-          ))}
-      </Dropzone>
-      <Dropzone
-        style={{ width: "300px" }}
-        onChange={updateFiles}
-        value={files}
-        clickable={false}
-      >
-        {files.length > 0 &&
-          files.map((file) => (
-            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
-          ))}
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-evenly",
+        gap: "40px",
+        flexWrap: "wrap",
+      }}
+    >
+      <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
+      <Dropzone style={{ width: "300px" }} clickable={false}>
+        {/**Files */}
       </Dropzone>
     </div>
   );

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

 import * as React from "react";
-import { Dropzone, FileMosaic } from "../../../files-ui";
+import { Dropzone } from "../../../files-ui";
 
-const DemoDropzoneLabel = (props) => {
-  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));
-  };
+const DemoDropzoneLabel = () => {
   return (
-    <div style={{ display: "flex" }}>
-      <Dropzone style={{ width: "300px" }} onChange={updateFiles} value={files}>
-        {files.length > 0 &&
-          files.map((file) => (
-            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
-          ))}
-      </Dropzone>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-evenly",
+        gap: "40px",
+        flexWrap: "wrap",
+      }}
+    >
+      <Dropzone style={{ width: "300px" }}>{/**Files */}</Dropzone>
       <Dropzone
         style={{ width: "300px" }}
-        onChange={updateFiles}
-        value={files}
-        label={"You better have already installed files-ui for your project XD"}
+        label={"Files ui ❤️"}
       >
-        {files.length > 0 &&
-          files.map((file) => (
-            <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
-          ))}
+        {/**Files */}
       </Dropzone>
     </div>
   );