[WIP]:Add action section in FileCard demo page, missong FileMosaic Demo Page

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

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileCardActions = (props: { card?: boolean }) => {
+  const { card } = props;
+  return (
+    <ShowDemoCode
+      codeCompleteJS={completeCodeJS(card)}
+      codeCompleteTS={completeCodeTS(card)}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS(card)}
+      codeSplittedTS={splittedCodeTS(card)}
+    />
+  );
+};
+export default CodeJSFileCardActions;
+
+const splittedCodeJS = (card?: boolean) => `<>
+  <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+  <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/>
+</>`;
+const splittedCodeTS = (card?: boolean) => `<>
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+<${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/>
+</>`;
+
+const completeCodeJS = (card?: boolean) => `import * as React from "react";
+import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+
+const sampleFileProps = {
+  id: "fileId",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};
+const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
+  const removeFile = (id) => {
+    console.log("delete button clicked on file: " + id);
+  };
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "white",
+          padding: "25px 0",
+          flexGrow:1
+        }}
+      >
+        <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "#121212",
+          padding: "25px 0",
+          flexGrow:1
+        }}
+      >
+        <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
+      </div>
+    </div>
+  );
+};
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
+
+const completeCodeTS = (card?: boolean) => `import * as React from "react";
+import { ExtFile, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+
+const sampleFileProps: ExtFile = {
+  id: "fileId",
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "file created from props.jsx",
+};
+const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
+  const removeFile = (id: string | number | undefined) => {
+    console.log("delete button clicked on file: " + id);
+  };
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap" }}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "white",
+          padding: "25px 0",
+          flexGrow:1
+        }}
+      >
+        <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "white",
+          padding: "25px 0",
+          flexGrow:1
+        }}
+      >
+        <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
+      </div>
+    </div>
+  );
+};
+export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;

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

+import * as React from "react";
+import {
+  ExtFile,
+  FileCard,
+  FileCardProps,
+  FileMosaic,
+} from "../../../files-ui";
+
+const sampleFileProps = {
+  size: 28 * 1024 * 1024,
+  type: "text/plain",
+  name: "sampleFile" + ".jsx",
+  valid: true,
+};
+
+const DemoFileCardActions = (props: { card?: boolean }) => {
+  const handleDelete = (id: string | number | undefined) => {
+    console.log("delete button clicked on file: " + id);
+  };
+  const handleSee = (imageSource: string | undefined) => {
+    console.log("watch image:", imageSource);
+  };
+  const handleWatch = (videoSource: File | string | undefined) => {
+    console.log("watch video:", videoSource);
+  };
+  const handleDownload = (
+    fileId: string | number | undefined,
+    downloadUrl?: string | undefined
+  ) => {
+    console.log("download file id", fileId);
+    console.log("download url", downloadUrl);
+  };
+  if (props.card)
+    return (
+      <>
+        <FileCard id={0} {...sampleFileProps} onDelete={handleDelete} />
+        <FileCard id={1} {...sampleFileProps} info />
+        <FileCard id={2} {...sampleFileProps} onSee={handleSee} imageUrl="https://w0.peakpx.com/wallpaper/635/84/HD-wallpaper-thanos-and-iron-man-avengers-clouds-cloudy-face-to-face-her-iron-man-marvel-thanos-war.jpg" />
+        <FileCard
+          id={3}
+          {...sampleFileProps}
+          onWatch={handleWatch}
+          videoUrl="https://media.istockphoto.com/id/1198092809/es/v%C3%ADdeo/grupo-de-mujeres-sonriendo-despu%C3%A9s-de-la-sesi%C3%B3n-de-entrenamiento-en-la-ciudad.mp4?s=mp4-640x640-is&k=20&c=K65BpQSq2ez-nqdNI-zeXLzxuLnsev5_bRm5AGdlHHc="
+        />
+        <FileCard id={4} {...sampleFileProps} downloadUrl="https://media.istockphoto.com/id/1198092809/es/v%C3%ADdeo/grupo-de-mujeres-sonriendo-despu%C3%A9s-de-la-sesi%C3%B3n-de-entrenamiento-en-la-ciudad.mp4?s=mp4-640x640-is&k=20&c=K65BpQSq2ez-nqdNI-zeXLzxuLnsev5_bRm5AGdlHHc=" />
+        <FileCard
+          id={5}
+          {...sampleFileProps}
+          onDownload={handleDownload}
+          downloadUrl="https://media.istockphoto.com/id/1198092809/es/v%C3%ADdeo/grupo-de-mujeres-sonriendo-despu%C3%A9s-de-la-sesi%C3%B3n-de-entrenamiento-en-la-ciudad.mp4?s=mp4-640x640-is&k=20&c=K65BpQSq2ez-nqdNI-zeXLzxuLnsev5_bRm5AGdlHHc="
+        />
+      </>
+    );
+  return (
+    <>
+      <FileMosaic id={0} {...sampleFileProps} onDelete={handleDelete} />
+      <FileMosaic id={1} {...sampleFileProps} info />
+      <FileMosaic id={2} {...sampleFileProps} onSee={handleSee} imageUrl="" />
+      <FileMosaic
+        id={3}
+        {...sampleFileProps}
+        onWatch={handleWatch}
+        videoUrl=""
+      />
+      <FileMosaic id={4} {...sampleFileProps} downloadUrl="" />
+      <FileMosaic
+        id={5}
+        {...sampleFileProps}
+        onDownload={handleDownload}
+        downloadUrl=""
+      />
+    </>
+  );
+};
+export default DemoFileCardActions;

src/pages/demo/FileCardDemoPage.jsx

@@ -24,6 +24,8 @@ import DemoFileMosaicValidation from "../../components/demo-components/filemosai
 import CodeJSFileMosaicValidation from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation";
 import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
 import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
+import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
+import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
 
 const FileCardDemoPage = (props) => {
   return (
@@ -233,15 +235,44 @@ const FileCardDemoPage = (props) => {
 
           <CodeJSFileMosaicDarkMode card />
         </section>
-    {/*     <section id="actions">
+
+        <section id="actions">
           <SubTitle content="Actions: info, delete, see, watch, download" />
           <DescParagraph>
-            The <CodeHighlight>FileCard</CodeHighlight> component supports dark
-            mode by setting the prop <TypeHighlight>darkMode</TypeHighlight> to{" "}
-            <TypeHighlight>true</TypeHighlight>. The elevation can be used to
-            establish a hierarchy between other content. In practical terms, the
-            elevation controls the size of the shadow applied to the surface. In
-            dark mode, raising the elevation also makes the surface lighter.
+            You can use the following actions.
+            <ul>
+              <li>
+                FileCard with the <CodeHighlight>onDelete</CodeHighlight> prop
+                will display a delete icon
+              </li>
+              <li>
+                FileCard with the <CodeHighlight>info</CodeHighlight> prop will
+                display an "info" icon that will display an info layer.
+              </li>
+              <li>
+                FileCard with the <CodeHighlight>onSee</CodeHighlight> prop will
+                display the "see" button that can be used to retrieve an image
+                URI obtained from reading a <TypeHighlight>File</TypeHighlight>{" "}
+                object if given or just the{" "}
+                <TypeHighlight>imageUrl</TypeHighlight> prop if given. The file
+                must be an image.
+              </li>
+              <li>
+                FileCard with the <CodeHighlight>onWatch</CodeHighlight> prop
+                will display the "play" icon that can be used to retrieve the
+                video as a <TypeHighlight>File</TypeHighlight> object if given
+                or just the <TypeHighlight>videoUrl</TypeHighlight> prop if
+                given. The file must be an video.
+              </li>
+              <li>
+                FileCard with the <CodeHighlight>downloadUrl</CodeHighlight>{" "}
+                prop will display the "download" icon that can be used to start
+                the download. If the <CodeHighlight>onDownload</CodeHighlight>{" "}
+                prop is given, the "download" icon will also be visible, but it
+                will be taken as the user will perform their own download.
+              </li>
+            </ul>
+           
           </DescParagraph>
 
           <div
@@ -250,13 +281,16 @@ const FileCardDemoPage = (props) => {
               flexWrap: "wrap",
               width: "100%",
               padding: "25px 0",
+              flexDirection: "row",
+              alignItems:"center",
+              justifyContent:"center",
+              gap:"28px"
             }}
           >
-            <DemoFileMosaicDarkMode card />
+            <DemoFileCardActions card />
           </div>
-
-          <CodeJSFileMosaicDarkMode card />
-        </section> */}
+          <CodeJSFileCardActions card />
+        </section>
         <section id="api">
           <SubTitle content="API" />
           <DescParagraph>