diff --git a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
index cc8242698102ff82bc5c5aabb9812ee07cdd52d6..073d27c2e487d37c6223c84bd0f20213e474346f 100644
--- a/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
+++ b/src/components/MainPage/MainRight/FileMosaicImageVideoPreviews.tsx
@@ -1,9 +1,17 @@
import * as React from "react";
import { Stack, Paper } from "@mui/material";
-import { FileMosaic, ExtFile } from "../../../files-ui";
+import { FileMosaic, ExtFile, FileMosaicProps } from "../../../files-ui";
import DescParagraph from "../../demo-components/desc-paragraph/DescParagraph";
import { FullScreen, ImagePreview, VideoPreview } from "../../../files-ui";
+import {
+ NarutoAndSasukeVsMomoshikiEN,
+ NarutoAndSasukeVsMomoshikiES,
+ ThorArrivesWakandaEN,
+ ThorArrivesWakandaES,
+} from "../../../data/videoLinks";
+const VIDEO_URL =
+ "https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
interface FileMosaicImageVideoPreviewsProps {
darkMode?: boolean;
}
@@ -22,18 +30,88 @@ const FileMosaicImageVideoPreviews: React.FC<
};
const handleWatch = (videoSource: File | string | undefined) => {
- console.log(
- "handleWatch videoSource",
- "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
- );
+ console.log("handleWatch videoSource", videoSource);
//setVideoSrc(videoSource);
//
- setVideoSrc(
- "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
- );
+ setVideoSrc(videoSource);
// setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
};
+ const handleDownload = async (
+ fileId: FileMosaicProps["id"],
+ downloadUrl?: string
+ ) => {
+ console.log("Download fileId", fileId);
+ console.log("Download fileName", files.filter(x=>x.id===fileId)[0]);
+ console.log("Download downloadUrl", downloadUrl);
+ if (!downloadUrl) return;
+ try {
+ const image = await fetch(downloadUrl);
+ const imageBlob = await image.blob();
+ const imageURL = URL.createObjectURL(imageBlob);
+ const anchor = document.createElement("a");
+ anchor.href = imageURL;
+ anchor.download = "fileName.jpg";
+
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(imageURL);
+ /* const resJson = await response.json();
+ console.log("Download", resJson); */
+ } catch (error) {
+ console.log("Download error", error);
+ console.error( error);
+ }
+ };
+ const handleDownloadXHR = async (
+ fileId: FileMosaicProps["id"],
+ downloadUrl?: string
+ ) => {
+
+ console.log("Download fileId", fileId);
+ console.log("Download fileName", files.filter(x=>x.id===fileId)[0].name);
+ console.log("Download downloadUrl", downloadUrl);
+ if (!downloadUrl) return;
+ try {
+ const request = new XMLHttpRequest();
+ request.responseType="blob";
+ request.open("get", downloadUrl, true);
+ request.send();
+
+ request.onreadystatechange=function(){
+ if(this.readyState==4 && this.status==200){
+ const imageURL = window.URL.createObjectURL(this.response);
+
+ const anchor = document.createElement("a");
+ anchor.href = imageURL;
+ anchor.download = "fileNamess.jpg";
+ document.body.appendChild(anchor);
+ anchor.click();
+
+ }else{
+ console.log("not yet");
+ }
+ }
+
+ const image = await fetch(downloadUrl);
+ const imageBlob = await image.blob();
+ const imageURL = URL.createObjectURL(imageBlob);
+
+ const anchor = document.createElement("a");
+ anchor.href = imageURL;
+ anchor.download = "fileName.jpg";
+
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(imageURL);
+ /* const resJson = await response.json();
+ console.log("Download", resJson); */
+ } catch (error) {
+ console.log("Download error", error);
+ }
+ };
return (
<div style={{ width: "100%" }}>
<h3>Or check the previews!</h3>
@@ -67,6 +145,7 @@ const FileMosaicImageVideoPreviews: React.FC<
onWatch={handleWatch}
{...f.extraData}
alwaysActive
+ onDownload={f.downloadUrl ? handleDownload : undefined}
/>
))}
<FullScreen
@@ -79,7 +158,7 @@ const FileMosaicImageVideoPreviews: React.FC<
open={videoSrc !== undefined}
onClose={() => setVideoSrc(undefined)}
>
- <VideoPreview videoSrc={videoSrc} autoPlay controls />
+ <VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>
</Stack>
</Paper>
@@ -91,10 +170,12 @@ export default FileMosaicImageVideoPreviews;
const files: ExtFile[] = [
{
id: 0,
- name: "image-preview.png",
- type: "image/png",
+ name: "mark45.jpg",
+ type: "image/jpeg",
size: 282000,
imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
+ downloadUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
+
},
{
@@ -102,8 +183,8 @@ const files: ExtFile[] = [
name: "video-preview.mp4",
type: "video/mp4",
size: 282000,
- downloadUrl:
- "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4",
+ downloadUrl: VIDEO_URL,
+ extraData: { videoUrl: VIDEO_URL },
},
{
id: 3,
@@ -122,9 +203,46 @@ const files: ExtFile[] = [
type: "image/png",
size: 282000,
downloadUrl:
- "https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg",
+ "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
imageUrl:
- "https://i.pinimg.com/236x/3e/e9/46/3ee946b27fd1cc5eb0b485e4a0669534.jpg",
+ "https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/768px-Facebook_f_logo_%282019%29.svg.png",
+
+ },
+];
+
+const videos: ExtFile[] = [
+ {
+ id: 0,
+ name: "ThorArrivesWakandaEN.mp4",
+ type: "video/mp4",
+ size: 282000,
+ downloadUrl: ThorArrivesWakandaEN,
+ extraData: { videoUrl: ThorArrivesWakandaEN },
+ },
+ {
+ id: 1,
+ name: "ThorArrivesWakandaES.mp4",
+ type: "video/mp4",
+ size: 282000,
+ downloadUrl: ThorArrivesWakandaES,
+ extraData: { videoUrl: ThorArrivesWakandaES },
+ },
+
+ {
+ id: 1,
+ name: "NarutoAndSasukeVsMomoshikiEN.mp4",
+ type: "video/mp4",
+ size: 282000,
+ downloadUrl: NarutoAndSasukeVsMomoshikiEN,
+ extraData: { videoUrl: NarutoAndSasukeVsMomoshikiEN },
+ },
+ {
+ id: 1,
+ name: "NarutoAndSasukeVsMomoshikiES.mp4",
+ type: "video/mp4",
+ size: 282000,
+ downloadUrl: NarutoAndSasukeVsMomoshikiES,
+ extraData: { videoUrl: NarutoAndSasukeVsMomoshikiES },
},
];
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileCardActions.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileCardActions.tsx
index 1ea224020aa2334ea18080f028a13c1b159ba1e4..48015be11943dd2450d507e89fc8055ae78b6db2 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileCardActions.tsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileCardActions.tsx
@@ -16,95 +16,155 @@ const CodeJSFileCardActions = (props: { card?: boolean }) => {
};
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 splittedCodeJS = (card?: boolean) => ``;
+const splittedCodeTS = (card?: boolean) => ``;
const completeCodeJS = (card?: boolean) => `import * as React from "react";
-import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+import {
+ ${card?"FileCard":"FileMosaic"},
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+} from "@files-ui/react";
-const sampleFileProps = {
- id: "fileId",
+const sampleFile = {
size: 28 * 1024 * 1024,
type: "text/plain",
- name: "file created from props.jsx",
+ name: "actions sampleFile.jsx",
+ valid: true,
};
-const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
- const removeFile = (id) => {
+const IMG_URL =
+ "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";
+const VIDEO_URL =
+ "https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
+
+const Demo${card?"FileCard":"FileMosaic"}Actions = ({ card }) => {
+ const [imgSrc, setImgSrc] = React.useState(undefined);
+ const [videoSrc, setVideoSrc] = React.useState(undefined);
+ const handleDelete = (id) => {
console.log("delete button clicked on file: " + id);
};
+ const handleSee = (imageSource) => {
+ console.log("watch image:", imageSource);
+ setImgSrc(imageSource);
+ };
+ const handleWatch = (videoSource) => {
+ console.log("watch video:", videoSource);
+ setVideoSrc(videoSource);
+ };
+ const handleDownload = (fileId, downloadUrl) => {
+ console.log("download file id", fileId);
+ console.log("download url", downloadUrl);
+ };
return (
- <div style={{ display: "flex", flexWrap: "wrap" }}>
- <div
- style={{
- display: "flex",
- justifyContent: "center",
- backgroundColor: "white",
- padding: "25px 0",
- flexGrow:1
- }}
+ <>
+ <${card?"FileCard":"FileMosaic"} id={0} {...sampleFile} onDelete={handleDelete} />
+ <${card?"FileCard":"FileMosaic"} id={1} {...sampleFile} info />
+ <${card?"FileCard":"FileMosaic"} id={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
+ <${card?"FileCard":"FileMosaic"}
+ id={3}
+ {...sampleFile}
+ onWatch={handleWatch}
+ videoUrl={VIDEO_URL}
+ />
+ <${card?"FileCard":"FileMosaic"} id={4} {...sampleFile} downloadUrl={IMG_URL} />
+ <${card?"FileCard":"FileMosaic"}
+ id={5}
+ {...sampleFile}
+ onDownload={handleDownload}
+ downloadUrl={VIDEO_URL}
+ />
+ <FullScreen
+ open={imgSrc !== undefined}
+ onClose={() => setImgSrc(undefined)}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
- </div>
- <div
- style={{
- display: "flex",
- justifyContent: "center",
- backgroundColor: "#121212",
- padding: "25px 0",
- flexGrow:1
- }}
+ <ImagePreview src={imgSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
- </div>
- </div>
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
+ </>
);
};
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
+export default Demo${card?"FileCard":"FileMosaic"}Actions;`;
const completeCodeTS = (card?: boolean) => `import * as React from "react";
-import { ExtFile, ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
+import {
+ ${card?"FileCard":"FileMosaic"},
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+ ExtFile,
+} from "@files-ui/react";
-const sampleFileProps: ExtFile = {
- id: "fileId",
+const sampleFile: ExtFile = {
size: 28 * 1024 * 1024,
type: "text/plain",
- name: "file created from props.jsx",
+ name: "actions sampleFile.jsx",
+ valid: true,
};
-const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
- const removeFile = (id: string | number | undefined) => {
+const IMG_URL =
+ "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";
+const VIDEO_URL =
+ "https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
+
+const Demo${card?"FileCard":"FileMosaic"}Actions = (props: { card?: boolean }) => {
+ const [imgSrc, setImgSrc] = React.useState<string | undefined>(undefined);
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+ const handleDelete = (id: string | number | undefined) => {
console.log("delete button clicked on file: " + id);
};
+ const handleSee = (imageSource: string | undefined) => {
+ console.log("watch image:", imageSource);
+ setImgSrc(imageSource);
+ };
+ const handleWatch = (videoSource: File | string | undefined) => {
+ console.log("watch video:", videoSource);
+ setVideoSrc(videoSource);
+ };
+ const handleDownload = (
+ fileId: string | number | undefined,
+ downloadUrl?: string | undefined
+ ) => {
+ console.log("download file id", fileId);
+ console.log("download url", downloadUrl);
+ };
return (
- <div style={{ display: "flex", flexWrap: "wrap" }}>
- <div
- style={{
- display: "flex",
- justifyContent: "center",
- backgroundColor: "white",
- padding: "25px 0",
- flexGrow:1
- }}
+ <>
+ <${card?"FileCard":"FileMosaic"} id={0} {...sampleFile} onDelete={handleDelete} />
+ <${card?"FileCard":"FileMosaic"} id={1} {...sampleFile} info />
+ <${card?"FileCard":"FileMosaic"} id={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
+ <${card?"FileCard":"FileMosaic"}
+ id={3}
+ {...sampleFile}
+ onWatch={handleWatch}
+ videoUrl={VIDEO_URL}
+ />
+ <${card?"FileCard":"FileMosaic"} id={4} {...sampleFile} downloadUrl={IMG_URL} />
+ <${card?"FileCard":"FileMosaic"}
+ id={5}
+ {...sampleFile}
+ onDownload={handleDownload}
+ downloadUrl={VIDEO_URL}
+ />
+ <FullScreen
+ open={imgSrc !== undefined}
+ onClose={() => setImgSrc(undefined)}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
- </div>
- <div
- style={{
- display: "flex",
- justifyContent: "center",
- backgroundColor: "white",
- padding: "25px 0",
- flexGrow:1
- }}
+ <ImagePreview src={imgSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
- </div>
- </div>
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
+ </>
);
};
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
+export default Demo${card?"FileCard":"FileMosaic"}Actions;`;
diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
index 93615bcb9c19af25c45de85f6f4c62be487c56e6..44516d3b9a7e95421558a400f97c9e34455b273e 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode.tsx
@@ -16,17 +16,97 @@ const CodeJSFileMosaicDarkMode = (props: { card?: boolean }) => {
};
export default CodeJSFileMosaicDarkMode;
-const splittedCodeJS = (card?: boolean) => `<>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} darkMode/>
+const splittedCodeJS = (card?: boolean) =>
+ card
+ ? ""
+ : `<>
+ <${
+ 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 splittedCodeTS = (card?: boolean) =>
+ card
+ ? ""
+ : `<>
+ <${
+ 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 completeCodeJS = (card?: boolean) =>
+ card
+ ? `import { ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react";
+const sampleFilePropsCard = (elevationNumber) => {
+ return {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "elevation=" + elevationNumber + ".jsx",
+ valid: true,
+ };
+};
+const Demo${card ? "FileCard" : "FileMosaic"}DarkMode = () => {
+ const removeFile = (id) => {
+ console.log("delete button clicked on file: " + id);
+ };
+ return (
+ <>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ flexDirection: "column",
+ backgroundColor: "white",
+ alignItems: "center",
+ padding: "25px 0",
+ flexGrow: 1,
+ gap: "7px",
+ }}
+ >
+ {[0, 4, 16, 24].map((elevation) => (
+ <FileCard
+ key={elevation}
+ {...sampleFilePropsCard(elevation)}
+ onDelete={removeFile}
+ info
+ elevation={elevation}
+ />
+ ))}
+ </div>
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ backgroundColor: "#121212",
+ alignItems: "center",
+ padding: "25px 0",
+ flexGrow: 1,
+ gap: "7px",
+ }}
+ >
+ {[0, 4, 16, 24].map((elevation) => (
+ <FileCard
+ key={elevation}
+ {...sampleFilePropsCard(elevation)}
+ onDelete={removeFile}
+ darkMode
+ info
+ elevation={elevation}
+ />
+ ))}
+ </div>
+ </>
+ );
+export default Demo${card ? "FileCard" : "FileMosaic"}DarkMode;`
+ : `import * as React from "react";
+import { ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react";
const sampleFileProps = {
id: "fileId",
@@ -34,7 +114,7 @@ const sampleFileProps = {
type: "text/plain",
name: "file created from props.jsx",
};
-const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
+const Demo${card ? "FileCard" : "FileMosaic"}DarkMode = () => {
const removeFile = (id) => {
console.log("delete button clicked on file: " + id);
};
@@ -49,7 +129,9 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
flexGrow:1
}}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+ <${
+ card ? "FileCard" : "FileMosaic"
+ } {...sampleFileProps} info onDelete={removeFile} />
</div>
<div
style={{
@@ -60,15 +142,86 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
flexGrow:1
}}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
+ <${
+ card ? "FileCard" : "FileMosaic"
+ } {...sampleFileProps} info darkMode onDelete={removeFile} />
</div>
</div>
);
};
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
+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 completeCodeTS = (card?: boolean) =>
+ card
+ ? `import { ${
+ card ? "FileCard" : "FileMosaic"
+ }, ExtFile, FileCardProps } from "@files-ui/react";
+const sampleFilePropsCard = (elevationNumber: number): ExtFile => {
+ return {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "elevation=" + elevationNumber + ".jsx",
+ valid: true,
+ };
+};
+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",
+ justifyContent: "center",
+ flexDirection: "column",
+ backgroundColor: "white",
+ alignItems: "center",
+ padding: "25px 0",
+ flexGrow: 1,
+ gap: "7px",
+ }}
+ >
+ {[0, 4, 16, 24].map((elevation) => (
+ <FileCard
+ key={elevation}
+ {...sampleFilePropsCard(elevation)}
+ onDelete={removeFile}
+ info
+ elevation={elevation as FileCardProps["elevation"]}
+ />
+ ))}
+ </div>
+ <div
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ backgroundColor: "#121212",
+ alignItems: "center",
+ padding: "25px 0",
+ flexGrow: 1,
+ gap: "7px",
+ }}
+ >
+ {[0, 4, 16, 24].map((elevation) => (
+ <FileCard
+ key={elevation}
+ {...sampleFilePropsCard(elevation)}
+ onDelete={removeFile}
+ darkMode
+ info
+ elevation={elevation as FileCardProps["elevation"]}
+ />
+ ))}
+ </div>
+ </>
+ );
+export default Demo${card ? "FileCard" : "FileMosaic"}DarkMode;
+`
+ : `import * as React from "react";
+import { ExtFile, ${card ? "FileCard" : "FileMosaic"} } from "@files-ui/react";
const sampleFileProps: ExtFile = {
id: "fileId",
@@ -76,7 +229,7 @@ const sampleFileProps: ExtFile = {
type: "text/plain",
name: "file created from props.jsx",
};
-const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
+const Demo${card ? "FileCard" : "FileMosaic"}DarkMode = () => {
const removeFile = (id: string | number | undefined) => {
console.log("delete button clicked on file: " + id);
};
@@ -91,20 +244,24 @@ const Demo${card?"FileCard":"FileMosaic"}DarkMode = () => {
flexGrow:1
}}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info onDelete={removeFile} />
+ <${
+ card ? "FileCard" : "FileMosaic"
+ } {...sampleFileProps} info onDelete={removeFile} />
</div>
<div
style={{
display: "flex",
justifyContent: "center",
- backgroundColor: "white",
+ backgroundColor: "#121212",
padding: "25px 0",
flexGrow:1
}}
>
- <${card?"FileCard":"FileMosaic"} {...sampleFileProps} info darkMode onDelete={removeFile} />
+ <${
+ card ? "FileCard" : "FileMosaic"
+ } {...sampleFileProps} info darkMode onDelete={removeFile} />
</div>
</div>
);
};
-export default Demo${card?"FileCard":"FileMosaic"}DarkMode;`;
+export default Demo${card ? "FileCard" : "FileMosaic"}DarkMode;`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileCradActions.tsx b/src/components/demo-components/filemosaic-demo/DemoFileCradActions.tsx
index 50064d65405c6fb2e213380357922f622e3464c2..08e9359493b5e2273ce20df6f51787eeefebe47d 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileCradActions.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileCradActions.tsx
@@ -1,27 +1,39 @@
import * as React from "react";
import {
- ExtFile,
FileCard,
- FileCardProps,
FileMosaic,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+ ExtFile,
} from "../../../files-ui";
-const sampleFileProps = {
+const sampleFile: ExtFile = {
size: 28 * 1024 * 1024,
type: "text/plain",
- name: "sampleFile" + ".jsx",
+ name: "actions sampleFile.jsx",
valid: true,
};
+const IMG_URL =
+ "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";
+const VIDEO_URL =
+ "https://srv23.y2mate.is/download?file=cd448fa7c7fe6c301970e890794fb682137140";
const DemoFileCardActions = (props: { card?: boolean }) => {
+ const [imgSrc, setImgSrc] = React.useState<string | undefined>(undefined);
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
const handleDelete = (id: string | number | undefined) => {
console.log("delete button clicked on file: " + id);
};
const handleSee = (imageSource: string | undefined) => {
console.log("watch image:", imageSource);
+ setImgSrc(imageSource);
};
const handleWatch = (videoSource: File | string | undefined) => {
console.log("watch video:", videoSource);
+ setVideoSrc(videoSource);
};
const handleDownload = (
fileId: string | number | undefined,
@@ -33,42 +45,66 @@ const DemoFileCardActions = (props: { card?: boolean }) => {
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={0} {...sampleFile} onDelete={handleDelete} />
+ <FileCard id={1} {...sampleFile} info />
+ <FileCard id={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
<FileCard
id={3}
- {...sampleFileProps}
+ {...sampleFile}
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="
+ videoUrl={VIDEO_URL}
/>
- <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={4} {...sampleFile} downloadUrl={IMG_URL} />
<FileCard
id={5}
- {...sampleFileProps}
+ {...sampleFile}
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="
+ downloadUrl={VIDEO_URL}
/>
+ <FullScreen
+ open={imgSrc !== undefined}
+ onClose={() => setImgSrc(undefined)}
+ >
+ <ImagePreview src={imgSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
</>
);
return (
<>
- <FileMosaic id={0} {...sampleFileProps} onDelete={handleDelete} />
- <FileMosaic id={1} {...sampleFileProps} info />
- <FileMosaic id={2} {...sampleFileProps} onSee={handleSee} imageUrl="" />
+ <FileMosaic id={0} {...sampleFile} onDelete={handleDelete} />
+ <FileMosaic id={1} {...sampleFile} info />
+ <FileMosaic id={2} {...sampleFile} onSee={handleSee} imageUrl={IMG_URL} />
<FileMosaic
id={3}
- {...sampleFileProps}
+ {...sampleFile}
onWatch={handleWatch}
- videoUrl=""
+ videoUrl={VIDEO_URL}
/>
- <FileMosaic id={4} {...sampleFileProps} downloadUrl="" />
+ <FileMosaic id={4} {...sampleFile} downloadUrl={IMG_URL} />
<FileMosaic
id={5}
- {...sampleFileProps}
+ {...sampleFile}
onDownload={handleDownload}
- downloadUrl=""
+ downloadUrl={VIDEO_URL}
/>
+ <FullScreen
+ open={imgSrc !== undefined}
+ onClose={() => setImgSrc(undefined)}
+ >
+ <ImagePreview src={imgSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
</>
);
};
diff --git a/src/data/videoLinks.js b/src/data/videoLinks.js
new file mode 100644
index 0000000000000000000000000000000000000000..01e7e05a8574a7273afb5c10dce4298b5802a061
--- /dev/null
+++ b/src/data/videoLinks.js
@@ -0,0 +1,7 @@
+const BASE_URL =
+ "http://10.100.179.201:2800/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503/static";
+
+export const ThorArrivesWakandaEN = BASE_URL+"/ThorEN.mp4";
+export const ThorArrivesWakandaES = BASE_URL+"/ThorEN.mp4";
+export const NarutoAndSasukeVsMomoshikiEN = BASE_URL+"/NarutoEN.mp4";
+export const NarutoAndSasukeVsMomoshikiES = BASE_URL+"/NarutoES.mp4";
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index ebb8a3d10deed580a88f6f7f91b383233c5b220c..6dcd66dfc78fc245cd93b6b5e239e916526210a3 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -2,9 +2,6 @@ import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import RightMenu from "../../components/RightMenu/RightMenu";
-import Paper from "@mui/material/Paper";
-import Stack from "@mui/material/Stack";
-import Alert from "@mui/material/Alert";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
@@ -13,7 +10,7 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import DemoFileCardBasic from "../../components/demo-components/file-card-demo/DemoFileCardBasic";
import CodeJSFileCardBasic from "../../components/demo-components/file-card-demo/CodeJSFileCardBasic";
-import { AlertTitle } from "@mui/material";
+import { AlertTitle, Alert, Paper } from "@mui/material";
import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
@@ -176,7 +173,7 @@ const FileCardDemoPage = (props) => {
current progress of the upload process.
<br />
Each of the following examples demonstrates one state combination of
- the FileMosaic component.
+ the FileCard component.
</DescParagraph>
<DemoContainerFileMosaic card>
@@ -210,32 +207,6 @@ const FileCardDemoPage = (props) => {
</ul>
</Alert>
</section>
-
- <section id="dark-mode">
- <SubTitle content="Dark mode and Elevation" />
- <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.
- </DescParagraph>
-
- <div
- style={{
- display: "flex",
- flexWrap: "wrap",
- width: "100%",
- padding: "25px 0",
- }}
- >
- <DemoFileMosaicDarkMode card />
- </div>
-
- <CodeJSFileMosaicDarkMode card />
- </section>
-
<section id="actions">
<SubTitle content="Actions: info, delete, see, watch, download" />
<DescParagraph>
@@ -243,7 +214,7 @@ const FileCardDemoPage = (props) => {
<ul>
<li>
FileCard with the <CodeHighlight>onDelete</CodeHighlight> prop
- will display a delete icon
+ will display a delete icon.
</li>
<li>
FileCard with the <CodeHighlight>info</CodeHighlight> prop will
@@ -252,10 +223,10 @@ const FileCardDemoPage = (props) => {
<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.
+ <TypeHighlight>URI</TypeHighlight> obtained by reading a{" "}
+ <TypeHighlight>File</TypeHighlight> object if given or just the{" "}
+ <TypeHighlight>imageUrl</TypeHighlight> prop if given. In the
+ first case, the file must be an image.
</li>
<li>
FileCard with the <CodeHighlight>onWatch</CodeHighlight> prop
@@ -272,25 +243,85 @@ const FileCardDemoPage = (props) => {
will be taken as the user will perform their own download.
</li>
</ul>
-
</DescParagraph>
- <div
+ <Paper
+ variant="outlined"
style={{
+ padding: "25px",
display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ gap: "7px",
flexWrap: "wrap",
width: "100%",
- padding: "25px 0",
+ //padding: "25px 0",
flexDirection: "row",
- alignItems:"center",
- justifyContent:"center",
- gap:"28px"
}}
>
<DemoFileCardActions card />
- </div>
+ </Paper>
<CodeJSFileCardActions card />
+ <Alert severity="info">
+ <AlertTitle>
+ {" "}
+ <strong>downloadUrl</strong> and <strong>onDownload</strong> props
+ </AlertTitle>
+ {/* This is an info alert — <strong>check it out!</strong>
+ */}
+ When only <CodeHighlight>downloadUrl</CodeHighlight> is specifyed,
+ FileCard will perform the download only for{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">
+ same-origin URLs
+ </AnchorToTab>{" "}
+ since it uses the{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
+ anchor
+ </AnchorToTab>{" "}
+ tag under the hood.
+ <br />
+ If the resource is located in any other host, it will open a new tab
+ and display the content.
+ <br />
+ For avoiding that behaviour you can do you own download
+ implementation by overriding the download function by setting the{" "}
+ <CodeHighlight>onDownload</CodeHighlight> prop.
+ <br />
+ You can check an example here:
+ <ul>
+ <li>
+ <AnchorToTab href="/utilities-methods/file-downloader">
+ {"Download a File"}
+ </AnchorToTab>
+ </li>
+ </ul>
+ </Alert>
+ </section>
+ <section id="dark-mode">
+ <SubTitle content="Dark mode and Elevation" />
+ <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.
+ </DescParagraph>
+
+ <div
+ style={{
+ display: "flex",
+ flexWrap: "wrap",
+ width: "100%",
+ padding: "25px 0",
+ }}
+ >
+ <DemoFileMosaicDarkMode card />
+ </div>
+
+ <CodeJSFileMosaicDarkMode card />
</section>
+
<section id="api">
<SubTitle content="API" />
<DescParagraph>
@@ -299,9 +330,9 @@ const FileCardDemoPage = (props) => {
</DescParagraph>
<ul>
<li>
- <AnchorToTab href="/api/filecard">{"<FileMosaic/>"}</AnchorToTab>
+ <AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
</li>
- <li>
+ <li>|
<AnchorToTab href="/api/fileinputbuttom">
{"<FileInputButton/>"}
</AnchorToTab>
@@ -319,47 +350,37 @@ export default FileCardDemoPage;
const rightMenuItems = [
{
id: 0,
- label: "Basic file mosaic",
- referTo: "/components/file-mosaic#basic-filecard",
+ label: "Basic file card",
+ referTo: "/components/filecard#basic-filecard",
},
{
id: 1,
label: "Image Preview",
- referTo: "/components/file-mosaic#file-mosaic-image-preview",
+ referTo: "/components/filecard#image-preview",
},
{
id: 2,
label: "Validation",
- referTo: "/components/file-mosaic#file-mosaic-validation",
+ referTo: "/components/filecard#validation",
},
{
id: 3,
label: "Uploading",
- referTo: "/components/file-mosaic#file-mosaic-uploading",
+ referTo: "/components/filecard#uploading",
},
{
id: 4,
- label: "Localization",
- referTo: "/components/file-mosaic#file-mosaic-localization",
+ label: "Actions",
+ referTo: "/components/filecard#actions",
},
{
id: 5,
- label: "Previews",
- referTo: "/components/file-mosaic#file-mosaic-previews",
+ label: "Dark mode",
+ referTo: "/components/filecard#dark-mode",
},
{
id: 6,
- label: "Actions",
- referTo: "/components/file-mosaic#actions",
- },
- {
- id: 7,
- label: "Default previews",
- referTo: "/components/file-mosaic#default-previews",
- },
- {
- id: 8,
- label: "Dark mode & elevation",
- referTo: "/components/file-mosaic#dark-mode",
+ label: "API",
+ referTo: "/components/filecard#api",
},
];
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index d3a54f2913477d4e2a50890436aadfa231870e6c..af381aaa5403ea9c6abfa032ad8c8543e4d7b264 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -1,6 +1,4 @@
-import Alert from "@mui/material/Alert";
-import Paper from "@mui/material/Paper";
-import AlertTitle from "@mui/material/AlertTitle";
+import { Alert, AlertTitle, Paper } from "@mui/material";
import * as React from "react";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
@@ -27,6 +25,8 @@ import CodeJSFileMosaicLocalization from "../../components/demo-components/filem
import DemoFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode";
import CodeJSFileMosaicDarkMode from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicDarkMode";
import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic-demo/DemoFileMosaicFileIcons";
+import DemoFileCardActions from "../../components/demo-components/filemosaic-demo/DemoFileCradActions";
+import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
const FileMosaicDemoPage = (props) => {
return (
@@ -221,6 +221,96 @@ const FileMosaicDemoPage = (props) => {
</ul>
</Alert>
</section>
+ <section id="actions">
+ <SubTitle content="Actions: info, delete, see, watch, download" />
+ <DescParagraph>
+ You can use the following actions.
+ <ul>
+ <li>
+ FileMosaic with the <CodeHighlight>onDelete</CodeHighlight> prop
+ will display a delete icon.
+ </li>
+ <li>
+ FileMosaic with the <CodeHighlight>info</CodeHighlight> prop
+ will display an "info" icon that will display an info layer.
+ </li>
+ <li>
+ FileMosaic with the <CodeHighlight>onSee</CodeHighlight> prop
+ will display the "see" button that can be used to retrieve an
+ image <TypeHighlight>URI</TypeHighlight> obtained by reading a{" "}
+ <TypeHighlight>File</TypeHighlight> object if given or just the{" "}
+ <TypeHighlight>imageUrl</TypeHighlight> prop if given. In the
+ first case, the file must be an image.
+ </li>
+ <li>
+ FileMosaic 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>
+ FileMosaic 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>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ gap: "7px",
+ flexWrap: "wrap",
+ width: "100%",
+ //padding: "25px 0",
+ flexDirection: "row",
+ }}
+ >
+ <DemoFileCardActions />
+ </Paper>
+ <CodeJSFileCardActions />
+ <Alert severity="info">
+ <AlertTitle>
+ {" "}
+ <strong>downloadUrl</strong> and <strong>onDownload</strong> props
+ </AlertTitle>
+ {/* This is an info alert — <strong>check it out!</strong>
+ */}
+ When only <CodeHighlight>downloadUrl</CodeHighlight> is specifyed,
+ FileMosaic will perform the download only for{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">
+ same-origin URLs
+ </AnchorToTab>{" "}
+ since it uses the{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
+ anchor
+ </AnchorToTab>{" "}
+ tag under the hood.
+ <br />
+ If the resource is located in any other host, it will open a new tab
+ and display the content.
+ <br />
+ For avoiding that behaviour you can do you own download
+ implementation by overriding the download function by setting the{" "}
+ <CodeHighlight>onDownload</CodeHighlight> prop.
+ <br />
+ You can check an example here:
+ <ul>
+ <li>
+ <AnchorToTab href="/utilities-methods/file-downloader">
+ {"Download a File"}
+ </AnchorToTab>
+ </li>
+ </ul>
+ </Alert>
+ </section>
<section id="dark-mode">
<SubTitle content="Dark mode" />
<DescParagraph>
@@ -245,7 +335,8 @@ const FileMosaicDemoPage = (props) => {
<CodeJSFileMosaicDarkMode />
</section>
- <section id="localization">
+
+ {/* <section id="localization">
<SubTitle content="Localization" />
<DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> component has
@@ -285,9 +376,9 @@ const FileMosaicDemoPage = (props) => {
<DemoFileMosaicLocalization />
</Paper>
<CodeJSFileMosaicLocalization />
- </section>
+ </section> */}
- <section id="file-icon">
+ {/* <section id="file-icon">
<SubTitle content="File Icons (extensive list)" />
<DescParagraph>
The <CodeHighlight>FileMosaic</CodeHighlight> component supports
@@ -308,7 +399,7 @@ const FileMosaicDemoPage = (props) => {
>
<DemoFileMosaicFileIcons />
</Paper>
- </section>
+ </section> */}
<section id="api">
<SubTitle content="API" />
@@ -359,18 +450,18 @@ const rightMenuItems = [
referTo: "/components/filemosaic#uploading",
},
{
- id: 8,
- label: "Dark mode",
- referTo: "/components/filemosaic#dark-mode",
+ id: 4,
+ label: "Actions",
+ referTo: "/components/filemosaic#actions",
},
{
- id: 4,
- label: "Localization",
- referTo: "/components/filemosaic#localization",
+ id: 5,
+ label: "Dark mode",
+ referTo: "/components/filemosaic#dark-mode",
},
{
- id: 9,
- label: "File Icons",
- referTo: "/components/filemosaic#file-icon",
+ id: 6,
+ label: "API",
+ referTo: "/components/filemosaic#api",
},
];