[FEAT]: Add Basic demo code and sample in fileinputbutton component

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

 import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const BasicDropzoneCode = ({ splittedOnly = false }) => {
+const BasicDropzoneCode = ({ splittedOnly = false, button=false }) => {
   return (
     <ShowDemoCode
       splittedOnly={splittedOnly}
-      codeCompleteJS={completeCodeJS}
-      codeCompleteTS={completeCodeTS}
+      codeCompleteJS={button?splittedCodeJSButton:completeCodeJS}
+      codeCompleteTS={button?splittedCodeTSButton:completeCodeTS}
       codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
       codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
-      codeSplittedJS={splittedCodeJS}
-      codeSplittedTS={splittedCodeTS}
+      codeSplittedJS={button?splittedCodeJSButton:splittedCodeJS}
+      codeSplittedTS={button?splittedCodeTSButton:splittedCodeTS}
     />
   );
 };
 export default BasicDropzoneCode;
 
+const splittedCodeJSButton = `<FileInputButton onChange={updateFiles} value={files} />
+{files.map((file) => (
+  <FileCard key={file.id} {...file} onDelete={removeFile} info />
+))}`;
+const splittedCodeTSButton = splittedCodeJSButton;
+//////////
 const splittedCodeJS = `<Dropzone
   onChange={updateFiles}
   value={files}

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

-import { Dropzone, FileMosaic } from "../../../files-ui";
+import {
+  Dropzone,
+  FileCard,
+  FileInputButton,
+  FileMosaic,
+} from "../../../files-ui";
 import * as React from "react";
-export default function BasicDemoDropzone() {
+export default function BasicDemoDropzone({ button }) {
   const [files, setFiles] = React.useState([]);
   const updateFiles = (incommingFiles) => {
     //do something with the files
@@ -10,6 +15,38 @@ export default function BasicDemoDropzone() {
   const removeFile = (id) => {
     setFiles(files.filter((x) => x.id !== id));
   };
+  if (button) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-evenly",
+          gap: "10px",
+          flexWrap: "wrap",
+          width: "100%",
+        }}
+      >
+        <FileInputButton onChange={updateFiles} value={files} />
+        {files.length > 0 && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap:"5px",
+              minWidth:"50%"
+            }}
+          >
+            {files.map((file) => (
+              <FileCard key={file.id} {...file} onDelete={removeFile} info />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
   return (
     <Dropzone onChange={updateFiles} value={files}>
       {files.length > 0 &&

src/pages/demo/DropzoneDemoPage.jsx

@@ -20,6 +20,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import RightMenu from "../../components/RightMenu/RightMenu";
 import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
 import AnchorToTab from "../../components/util-components/AnchorToTab";
+
 import DemoDropzoneFooterConfig from "../../components/demo-components/dropzone-demo/DemoDropzoneFooterConfig";
 import DemoDropzoneHeaderConfig from "../../components/demo-components/dropzone-demo/DemoDropzoneHeaderConfig";
 import CodeDemoDropzoneHeaderConfig from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneHeaderConfig";
@@ -46,9 +47,11 @@ const DropzoneDemoPage = (props) => {
         <MainTitle>Dropzone</MainTitle>
 
         <MainParagraph>
-          The "dropzone" component is a special{" "}
-          <CodeHighlight>input</CodeHighlight> enhanced by the ability to allow
-          users to drag and drop files there or choose files from a file dialog.
+          The default <CodeHighlight>{'<input type="file"/>'}</CodeHighlight> is
+          just a quite boring button. That's why we present the"dropzone"
+          component is an special <CodeHighlight>input</CodeHighlight> enhanced
+          by the ability to allow users to drag and drop files there or choose
+          files from a file dialog and also to validate an upload them.
         </MainParagraph>
 
         <DescParagraph>
@@ -81,7 +84,7 @@ const DropzoneDemoPage = (props) => {
         <section id="basic-dropzone">
           <SubTitle content="Basic Dropzone" />
           <DescParagraph>
-            In this demo we set dropzone with the minimum props that allows you
+            In this demo we set the <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> with the minimum props that allows you
             to get your task done fast. These props are{" "}
             <CodeHighlight>onChange</CodeHighlight> and{" "}
             <CodeHighlight>value</CodeHighlight>.