diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..db3c823a30aa8f5cd3374f30dc6ad39f573e026d
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneClickable.tsx
@@ -0,0 +1,45 @@
+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;
diff --git a/src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3de75d3b21bede2731ff9d1509d0be88df6ef2a8
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDropzoneDemoLabel.tsx
@@ -0,0 +1,52 @@
+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;
+
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx
index 626eb14ad7afb8f9165019f0152705a51943f151..4037a97d7d8751f753165eddec07b888d6e178cd 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneClickable.jsx
@@ -1,34 +1,19 @@
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>
);
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx
index 744a2436822c3e7009087c47555802506e5a444a..a5a44461032a3af8f49e8c8fb56368079dfef756 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneLabel.jsx
@@ -1,34 +1,22 @@
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>
);