diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx
index 41ebea43704223916d31544817b86439edca1d46..66c69627811bcfa588823f806b058611fcd71d27 100644
--- a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPage.tsx
@@ -1,7 +1,14 @@
import * as React from "react";
import { Stack, Paper } from "@mui/material";
-import { FileCard,ExtFile , FullScreen, ImagePreview, VideoPreview} from "../../../files-ui";
-
+import {
+ FileCard,
+ ExtFile,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+} from "../../../files-ui";
+import AnchorToTab from "../../util-components/AnchorToTab";
+import TypeHighlight from "../../typeHighlight/TypeHighlight";
interface ExtraComponentsMainPageProps {
darkMode?: boolean;
@@ -34,9 +41,6 @@ const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
};
return (
- <div style={{ width: "100%" }}>
- <h3>FileCard:</h3>
-
<Paper
variant="outlined"
sx={{
@@ -54,17 +58,30 @@ const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
flexWrap: "wrap",
}}
>
- {files.map((f: ExtFile, index: number) => (
- <FileCard
- key={index}
- //darkMode={darkMode}
- {...f}
- onSee={handleSee}
- onWatch={handleWatch}
- {...f.extraData}
- alwaysActive
- />
- ))}
+ <>
+ <TypeHighlight>
+ <AnchorToTab href="/components/filecard">
+ {" "}
+ <h3 style={{margin:0}}>{"<FileCard/>"}</h3>{" "}
+ </AnchorToTab>
+ </TypeHighlight>
+
+ {files.map((f: ExtFile, index: number) => (
+ <FileCard
+ onClick={() => {
+ alert("haaa");
+ }}
+ key={index}
+ //darkMode={darkMode}
+ {...f}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ {...f.extraData}
+ info
+ darkMode={darkMode}
+ />
+ ))}
+ </>
<FullScreen
open={imageSrc !== undefined}
onClose={() => setImageSrc(undefined)}
@@ -79,19 +96,18 @@ const ExtraComponentsMainPage: React.FC<ExtraComponentsMainPageProps> = (
</FullScreen>
</Stack>
</Paper>
- </div>
);
};
export default ExtraComponentsMainPage;
const files: ExtFile[] = [
- {
+ /* {
id: 0,
name: "image-preview.png",
type: "image/png",
size: 282000,
imageUrl: "https://i.ytimg.com/vi/98FO19TuI9A/maxresdefault.jpg",
- },
+ }, */
{
id: 2,
diff --git a/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fe683455d6e9eff59915023e772bd385b3d8368
--- /dev/null
+++ b/src/components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Stack, Paper } from "@mui/material";
+import {
+ FileCard,
+ ExtFile,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+ FileInputButton,
+} from "../../../files-ui";
+import AnchorToTab from "../../util-components/AnchorToTab";
+import TypeHighlight from "../../typeHighlight/TypeHighlight";
+
+interface ExtraComponentsMainPageProps {
+ darkMode?: boolean;
+}
+const ExtraComponentsMainPageInputButton: React.FC<
+ ExtraComponentsMainPageProps
+> = (props: ExtraComponentsMainPageProps) => {
+ const { darkMode } = props;
+ const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+ const updateFile = (incommingFiles: ExtFile[]) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles[0]);
+ };
+
+ const removeFile = () => {
+ setValue(undefined);
+ };
+ return (
+ <Paper
+ variant="outlined"
+ sx={{
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent:"space-between",
+ padding: "20px 0",
+ boxSizing: "border-box",
+ backgroundColor: darkMode ? "#121212" : "rgba(0, 0, 0, 0.06)",
+ height: "100%",
+ }}
+ >
+ <TypeHighlight>
+ <AnchorToTab href="/components/fileinputbutton">
+ <h3 style={{ margin: 0 }}>{"<FileInputButton/>"}</h3>
+ </AnchorToTab>
+ </TypeHighlight>
+ <Stack
+ direction={"column"}
+ spacing={2}
+ alignItems="center"
+ justifyContent={"space-evenly"}
+ sx={{
+ flexWrap: "wrap",
+ flexGrow:1,
+ //height: "100%",
+ }}
+ >
+ {value ? (
+ <FileCard {...value} onDelete={removeFile} info />
+ ) : (
+ <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+ )}
+ <FileCard {...sampleFileProps} info />
+ </Stack>
+ </Paper>
+ );
+};
+export default ExtraComponentsMainPageInputButton;
+
+const sampleFileProps: ExtFile = {
+ id: "fileId",
+ size: 28 * 1024 * 1024,
+ type: "text/plain",
+ name: "file created from props.jsx",
+};
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
index 8668e4f2ba3e3cf276a567419e6bb00478012ad9..607c78af64534731b4cbc0f784411659f8e0cf70 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx
@@ -42,50 +42,51 @@ const DemoFileMosaicUploadStatus = (props: { card?: boolean }) => {
return (
<>
<FlexRowContainer card title={"preparing stage"}>
- <FileCard {...preparingFile} />
- <FileCard {...preparingFile} onCancel={handleCancel} />
+ <FileCard {...preparingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...preparingFile} onCancel={handleCancel} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
<FlexRowContainer card title={"uploading stage"}>
- <FileCard {...uploadingFile} />
- <FileCard {...uploadingFile} progress={progress} />
- <FileCard {...uploadingFile} onAbort={handleAbort} />
+ <FileCard {...uploadingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...uploadingFile} progress={progress} onClick={()=>alert("haaaaaa")} />
+ <FileCard {...uploadingFile} onAbort={handleAbort} onClick={()=>alert("haaaaaa")}/>
<FileCard
{...uploadingFile}
onAbort={handleAbort}
- progress={progress}
+ progress={progress} onClick={()=>alert("haaaaaa")}
/>
</FlexRowContainer>
<FlexRowContainer card title={"upload result stage"}>
- <FileCard {...uploadResultFiles[0]} uploadStatus={status1} />
- <FileCard {...uploadResultFiles[1]} uploadStatus={status2} />
- <FileCard {...uploadResultFiles[2]} uploadStatus={status3} />
+ <FileCard {...uploadResultFiles[0]} uploadStatus={status1} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...uploadResultFiles[1]} uploadStatus={status2} onClick={()=>alert("haaaaaa")}/>
+ <FileCard {...uploadResultFiles[2]} uploadStatus={status3} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
</>
);
return (
<>
<FlexRowContainer title={"preparing stage"}>
- <FileMosaic {...preparingFile} />
- <FileMosaic {...preparingFile} onCancel={handleCancel} />
+ <FileMosaic {...preparingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileMosaic {...preparingFile} onCancel={handleCancel} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
<FlexRowContainer title={"uploading stage"}>
- <FileMosaic {...uploadingFile} />
- <FileMosaic {...uploadingFile} progress={progress} />
- <FileMosaic {...uploadingFile} onAbort={handleAbort} />
+ <FileMosaic {...uploadingFile} onClick={()=>alert("haaaaaa")}/>
+ <FileMosaic {...uploadingFile} progress={progress} onClick={()=>alert("haaaaaa")}/>
+ <FileMosaic {...uploadingFile} onAbort={handleAbort} onClick={()=>alert("haaaaaa")}/>
<FileMosaic
{...uploadingFile}
onAbort={handleAbort}
progress={progress}
+ onClick={()=>alert("haaaaaa")}
/>
</FlexRowContainer>
<FlexRowContainer title={"upload result stage"}>
- <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} />
- <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} />
- <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} />
+ <FileMosaic {...uploadResultFiles[0]} uploadStatus={status1} onClick={()=>alert("haaaaaa")} />
+ <FileMosaic {...uploadResultFiles[1]} uploadStatus={status2} onClick={()=>alert("haaaaaa")} />
+ <FileMosaic {...uploadResultFiles[2]} uploadStatus={status3} onClick={()=>alert("haaaaaa")}/>
</FlexRowContainer>
</>
);
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 5e8274220a2a0167c24b3aa88c7c877ed7ea553c..9e8d3b4e1aebf605ded2ad004fb85a403fa7b1a6 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -10,6 +10,8 @@ import MainFooter from "../components/MainPage/MainFooter";
import FileMosaicImageVideoPreviews from "../components/MainPage/MainRight/FileMosaicImageVideoPreviews";
//import FileCard from "../files-ui/components/file-item/components/FileCard/FileCard";
import { Divider } from "@mui/material";
+import ExtraComponentsMainPage from "../components/MainPage/SecondaryRight/ExtraComponentsMainPage";
+import ExtraComponentsMainPageInputButton from "../components/MainPage/SecondaryRight/ExtraComponentsMainPageInputButton";
const MainPage = ({ darkMode }) => {
const [darkModeOn, setDarkModeOn] = React.useState(false);
@@ -30,9 +32,17 @@ const MainPage = ({ darkMode }) => {
<div className="fui-main-left">
<div className={"filesui-main-logo-container"}>
{!darkMode ? (
- <img className="fui-logo-img" src={logo_blue} alt={"files-ui-logo-blue"}/>
+ <img
+ className="fui-logo-img"
+ src={logo_blue}
+ alt={"files-ui-logo-blue"}
+ />
) : (
- <img className="fui-logo-img" src={logo_blue_dark} alt={"files-ui-logo-dark"}/>
+ <img
+ className="fui-logo-img"
+ src={logo_blue_dark}
+ alt={"files-ui-logo-dark"}
+ />
)}
</div>
@@ -58,9 +68,35 @@ const MainPage = ({ darkMode }) => {
<FileMosaicImageVideoPreviews darkMode={darkModeOn} />
</div>
</main>
-
+ <section
+ id="more-components"
+ className={
+ darkModeOn
+ ? "files-ui-secondary-container darkmode"
+ : "files-ui-secondary-container"
+ }
+ >
+ <div className="secondary-content">
+ <h2
+ className={!darkModeOn ? "fui-logo-text" : "fui-logo-text darkmode"}
+ >
+ Yes! There are even more components
+ </h2>
+ <div className="secondary-content-flex">
+ <div className="secondary-item">
+ <ExtraComponentsMainPage darkMode={darkModeOn} />
+ </div>
+ <div className="secondary-item">
+ <ExtraComponentsMainPageInputButton darkMode={darkModeOn} />
+ </div>
+ <div className="secondary-item">
+ <ExtraComponentsMainPage darkMode={darkModeOn} />
+ </div>
+ </div>
+ </div>
+ </section>
<MainFooter />
</div>
);
};
-export default MainPage;
\ No newline at end of file
+export default MainPage;
diff --git a/src/static/videos/NarutoEN.mp4 b/src/static/videos/NarutoEN.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..4b5a4ed9b91b9b0af0af8a5985ded2944c2f6792
Binary files /dev/null and b/src/static/videos/NarutoEN.mp4 differ
diff --git a/src/static/videos/NarutoES.mp4 b/src/static/videos/NarutoES.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..43777a67fdcc7838c8ca7ef3f6b11e51eee59e66
Binary files /dev/null and b/src/static/videos/NarutoES.mp4 differ
diff --git a/src/static/videos/ThorEN-1.mp4 b/src/static/videos/ThorEN-1.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..0f3344c31f37ed954c17d40c0a49f5d6532858fc
Binary files /dev/null and b/src/static/videos/ThorEN-1.mp4 differ
diff --git a/src/static/videos/ThorEN.mp4 b/src/static/videos/ThorEN.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..0f3344c31f37ed954c17d40c0a49f5d6532858fc
Binary files /dev/null and b/src/static/videos/ThorEN.mp4 differ
diff --git a/src/styles/MainPage.scss b/src/styles/MainPage.scss
index 5cd45f529ee14ad2bd72af3a3a2ceb2f16a449dc..33d0e3032cf25ad366d61ad34efc5220c8a14dd9 100644
--- a/src/styles/MainPage.scss
+++ b/src/styles/MainPage.scss
@@ -22,7 +22,7 @@ $border-color-dark: #0a1929;
align-items: center;
flex-direction: column;
justify-content: center;
-
+ color: #0a1929;
.filesui-nav {
transition: all 0.4s ease-in-out;
color: #042354;
@@ -173,7 +173,55 @@ $border-color-dark: #0a1929;
justify-content: center;
gap: 10px;
}
+ .files-ui-secondary-container {
+ width: 100%;
+ background-color: #f3f6f9;
+ &.darkmode {
+ background-color: #001e3c;
+ }
+ padding-bottom: 28px;
+ .secondary-content {
+ margin: auto;
+ width: 100%;
+ max-width: 1280px;
+ //min-height: calc(100vh - 64px);
+
+ .secondary-content-flex {
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ gap: 30px;
+ box-sizing: border-box;
+ padding: 0 28px;
+ flex-wrap: wrap;
+ .secondary-item {
+ flex-grow: 1;
+ min-width: 30%;
+ }
+ }
+ @media (max-width: 900px) {
+ .secondary-right {
+ width: 100%;
+ }
+ .secondary-left {
+ width: 100%;
+ }
+ }
+ .secondary-right {
+ box-sizing: border-box;
+ width: 50%;
+ margin: auto;
+ }
+ .secondary-left {
+ box-sizing: border-box;
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+ }
+ }
.gradient-span {
font-weight: 700;
background: linear-gradient(