diff --git a/public/index.html b/public/index.html
index b7ab8aa0296be06ce2b7222bc40f75dddb27bdcc..141e4023ea01472600ad38f39feb31ca4116ad6a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
name="description"
content="Web site created using create-react-app"
/> -->
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/files-ui-logo-blue-ico.ico" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
diff --git a/public/manifest.json b/public/manifest.json
index 9acee82a5e663eb3500f7f68c32c3ec929421ebb..903467ba6f5e685a222cfb0a5ee86223e6136c42 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Files ui",
+ "name": "File upload react library",
"icons": [
{
"src": "files-ui-ico-nb.ico",
@@ -8,17 +8,17 @@
"type": "image/x-icon"
},
{
- "src": "favicon.ico",
+ "src": "files-ui-ico-nb.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
- "src": "logo192.png",
+ "src": "files-ui-ico-nb.ico",
"type": "image/png",
"sizes": "192x192"
},
{
- "src": "logo512.png",
+ "src": "files-ui-ico-nb.ico",
"type": "image/png",
"sizes": "512x512"
}
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 16e855bf3427898fec69c0a5961d739286773967..8c0c3eb03e6aca61b2decfa7238b4792a0aae3e4 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -33,7 +33,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
//Icon: <FileOpenIcon />,
label: "Components",
index: 2,
- isOpen:false,
+ isOpen: false,
subMenu: [
{
label: "Dropzone",
@@ -61,7 +61,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
// Icon: <DocumentScannerIcon />,
label: "API documentation",
index: 3,
- isOpen:false,
subMenu: [
{
@@ -104,31 +103,46 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
},
{
label: "Server side",
- index: 5,
+ index: 4,
onClick: () => navigate("/server-side"),
},
{
label: "Code Generator",
- index: 6,
+ index: 5,
onClick: () => navigate("/code-generator"),
},
{
label: "Types",
- index: 7,
+ index: 6,
onClick: () => navigate("/types"),
},
-
{
label: "Utilities Methods",
- index: 8,
- onClick: () => navigate("/utilities-methods"),
+ index: 7,
+ subMenu: [
+ {
+ label: "File readers",
+ index: 71,
+ onClick: () => navigate("/utilities-methods/file-reader"),
+ },
+
+ {
+ label: "File uploader",
+ index: 72,
+ onClick: () => navigate("/utilities-methods/file-uploader"),
+ },
+ ],
},
];
const [quickStartItems, setQuickStartItems] =
React.useState(quickStartItemsIni);
- const [regularItems, setRegularItemsIni] = React.useState(RegularItemsIni);
+ const [regularItems, setRegularItemsIni] = React.useState(
+ RegularItemsIni.map((x) => {
+ return { ...x, isOpen: x.subMenu && x.index === selectedIndex };
+ })
+ );
const handleClick = () => {
//setOpen(!open);
@@ -153,7 +167,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
if (!withSubMenu) {
onClick?.();
} else {
-
setRegularItemsIni((arr) =>
arr.map((item) => {
if (item.index === index) {
@@ -185,6 +198,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
style={{ padding: "2px 20px" }}
key={indexBase}
selected={subMenu === undefined && selectedIndex === index}
+ //selected={selectedIndex === index}
onClick={(event) =>
handleListItemClick(
event,
@@ -209,7 +223,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{subMenu && (
<Collapse
- in={isOpen}
+ in={isOpen }
timeout="auto"
unmountOnExit
key={"collapse-submenu" + indexBase}
@@ -279,7 +293,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{subMenu && (
<Collapse
- in={isOpen}
+ in={isOpen }
timeout="auto"
unmountOnExit
key={"collapse-submenu" + indexBase}
diff --git a/src/components/MainPage/MainFooter.jsx b/src/components/MainPage/MainFooter.jsx
index 173ab59b0423dee0cc2a041a44e383833b0fc42e..b73c5756dd1ebb076b4530e40dd4b35f1a31bf9b 100644
--- a/src/components/MainPage/MainFooter.jsx
+++ b/src/components/MainPage/MainFooter.jsx
@@ -1,15 +1,17 @@
import * as React from "react";
import logo_blue from "../../static/files-ui-logo-white.png";
+import logo_white_ext from "../../static/files-ui-logo-text-med-white.png"
const MainFooter = (props) => {
return (
<footer className="filesui-footer">
<div
className={"filesui-main-logo-container darkmode"}
- style={{ height: "50px", width: "50px" }}
+ style={{ display:"flex", flexDirection:"row", alignItems:"center" }}
>
- <img className="fui-logo-img" src={logo_blue} width="100%" />
+ <img className="fui-logo-img" src={logo_blue} width="38px" />
+ <img className="fui-logo-text-img" src={logo_white_ext} height="18px" />
</div>
- <p>Copyright © 2023 FILES UI</p>
+ <p>{" | "}Copyright © 2023</p>
</footer>
);
};
diff --git a/src/components/MainPage/MainNavBar.jsx b/src/components/MainPage/MainNavBar.jsx
index 7b7f65729dd105673a406ddd322e53cc552edd05..5a6a0ef2548b6bce9d60d671a97e779037c3d0c5 100644
--- a/src/components/MainPage/MainNavBar.jsx
+++ b/src/components/MainPage/MainNavBar.jsx
@@ -3,8 +3,12 @@ import DarkModeLightModeButton from "./DarkModeLightModeButton";
import GitHubIcon from "@mui/icons-material/GitHub";
import { IconButton, Tooltip, Typography } from "@mui/material";
//import { useNavigate } from "react-router";
+import logo_text_blue from "../../static/files-ui-logo-text-med.png";
+import logo_text_blue_dark from "../../static/files-ui-logo-text-med-dark.png";
-const MainNavBar = ({ darkModeOn, logo_blue, logoLight, handleDarkMode }) => {
+
+
+const MainNavBar = ({ darkModeOn, logo_blue, logo_blue_dark, handleDarkMode }) => {
const handleGoGitRepo = () => {
window.open("https://github.com/files-ui", "_blank");
};
@@ -15,15 +19,13 @@ const MainNavBar = ({ darkModeOn, logo_blue, logoLight, handleDarkMode }) => {
<div className="left-part">
<div
className={
- darkModeOn
- ? "filesui-nav-logo-container darkmode"
- : "filesui-nav-logo-container"
+ "filesui-nav-logo-container"
}
>
<img
className={"filesui-nav-logo"}
// src={!darkModeOn ? logo_blue : logoLight}
- src={logo_blue}
+ src={darkModeOn?logo_blue_dark:logo_blue}
alt="files-ui-main-logo"
/>
</div>
@@ -31,9 +33,14 @@ const MainNavBar = ({ darkModeOn, logo_blue, logoLight, handleDarkMode }) => {
{/* <Typography variant="h5" noWrap component="div" color="primary">
Files ui
</Typography> */}
- <p className="filesui-nav-text-logo">
+ {/* <p className="filesui-nav-text-logo">
<span className="gradient-span">Files UI</span>
- </p>
+ </p> */}
+ <img
+ height={"20px"}
+ src={darkModeOn ? logo_text_blue_dark : logo_text_blue}
+ alt="files-ui-main-logo-text"
+ />
</div>
<div className="right-part">
diff --git a/src/components/RightMenu/RightMenuProps.ts b/src/components/RightMenu/RightMenuProps.ts
index d34faed790657f5c0c06d4e61f9f61e5e4349f91..2d1388457084692f249fd44c1fc25f78537f623b 100644
--- a/src/components/RightMenu/RightMenuProps.ts
+++ b/src/components/RightMenu/RightMenuProps.ts
@@ -9,5 +9,5 @@ export interface RightMenuItem {
export interface RightMenuProps {
items: RightMenuItem[];
width: string;
- baseUrl: string;
+ baseUrl?: string;
}
\ No newline at end of file
diff --git a/src/components/layout-pages/MainContentContainer.jsx b/src/components/layout-pages/MainContentContainer.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..eb002ad343a70f3e0a016b357fab44143fefb541
--- /dev/null
+++ b/src/components/layout-pages/MainContentContainer.jsx
@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import * as React from "react";
+
+const MainContentContainer = ({ children }) => {
+ return (
+ <Box
+ sx={{
+ overflow: "hidden",
+ boxSizing: "border-box",
+ marginLeft: { xl: "240px", lg: "0px" },
+ marginRight: { lg: "240px" },
+ width: {
+ lg: `min(1000px, calc(100% - ${240}px))`,
+ },
+ }}
+ >
+ <Box
+ sx={{
+ boxSizing: "border-box",
+ width: "100%",
+ //backgroundColor:"grey"
+ }}
+ >
+ {children}
+ </Box>
+ </Box>
+ );
+};
+export default MainContentContainer;
diff --git a/src/components/layout-pages/MainLayoutPage.jsx b/src/components/layout-pages/MainLayoutPage.jsx
index 2e61dfe4d39bcb292b54259f267324b6519c8411..d40086de720420efaf2eb3e2509c2c5672a25619 100644
--- a/src/components/layout-pages/MainLayoutPage.jsx
+++ b/src/components/layout-pages/MainLayoutPage.jsx
@@ -2,44 +2,14 @@ import { Stack, Box } from "@mui/material";
import * as React from "react";
import NavBarTemplate from "../../templates/NavBarTemplate";
-const MainLayoutPage = ({ mainContent, rightMenu, children, selectedIndex }) => {
+const MainLayoutPage = ({
+ children,
+ selectedIndex,
+}) => {
return (
<NavBarTemplate selectedIndex={selectedIndex}>
<Stack direction={"row"} sx={{ position: "relative" }}>
- <Box
- sx={{
- overflow:"hidden",
- boxSizing: "border-box",
- marginLeft: { xl: "240px", lg: "0px" },
- marginRight: { lg: "240px" },
- width: {
- lg: `min(1000px, calc(100% - ${240}px))`,
-
- },
- }}
- >
- <Box
- sx={{
- boxSizing: "border-box",
- width: "100%",
- //backgroundColor:"grey"
- }}
- >
- {mainContent || children}
- </Box>
- </Box>
-
- <Box
- sx={{
- position: "fixed",
- top: 100,
- right: 0,
- width: "240px",
- display: { lg: "flex", xs: "none" },
- }}
- >
- {rightMenu}
- </Box>
+ {children}
</Stack>
</NavBarTemplate>
);
diff --git a/src/components/layout-pages/RightMenuContainer.jsx b/src/components/layout-pages/RightMenuContainer.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc4d7d0a2c414e5e98fc18772484338bfcf051bd
--- /dev/null
+++ b/src/components/layout-pages/RightMenuContainer.jsx
@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import * as React from "react";
+
+const RightMenuContainer = ({ children }) => {
+ return (
+ <Box
+ sx={{
+ position: "fixed",
+ top: 100,
+ right: 0,
+ width: "240px",
+ display: { lg: "flex", xs: "none" },
+ }}
+ >
+ {children}
+ </Box>
+ );
+};
+export default RightMenuContainer;
diff --git a/src/components/main-title/MainTitle.tsx b/src/components/main-title/MainTitle.tsx
index e8467f20d2dcccc5ad010d0209163c46cd085b60..6c177be9925baa24dcab1c56a7c90cb9184f97ed 100644
--- a/src/components/main-title/MainTitle.tsx
+++ b/src/components/main-title/MainTitle.tsx
@@ -1,8 +1,11 @@
import * as React from "react";
interface MainTitleProps {
children?: React.ReactNode;
+ style?: React.CSSProperties;
+ className?: string;
}
const MainTitle: React.FC<MainTitleProps> = (props: MainTitleProps) => {
+ const { children, className, style } = props;
return (
<h1
style={{
@@ -11,9 +14,11 @@ const MainTitle: React.FC<MainTitleProps> = (props: MainTitleProps) => {
lineHeight: "1.22222",
color: "#0a1929",
wordBreak: "break-word",
+ ...style,
}}
+ className={className}
>
- {props.children}
+ {children}
</h1>
);
};
diff --git a/src/hooks/useNavigateGoBack.tsx b/src/hooks/useNavigateGoBack.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a0fdee690cd0a385e4131e698bde16d1c962461e
--- /dev/null
+++ b/src/hooks/useNavigateGoBack.tsx
@@ -0,0 +1,15 @@
+import { useNavigate } from "react-router-dom";
+
+/** Navigate to the top of a page so that the scroll position
+ * isn't persisted between pages. Use this instead of React Dom's
+ * build-in @see {@link useNavigate}. */
+export const useNavigateGoBack = () => {
+ const navigate = useNavigate();
+
+ const navigateAndReset = () => {
+ navigate(-1);
+ window.scrollTo(0, 0);
+ };
+
+ return navigateAndReset;
+};
\ No newline at end of file
diff --git a/src/hooks/useNavigateToTop.ts b/src/hooks/useNavigateToTop.ts
index fe4179d8353919c790aea6b688ee00d6a4b29e72..d2f4e3af76f357090f648a8db8e266416c2079ae 100644
--- a/src/hooks/useNavigateToTop.ts
+++ b/src/hooks/useNavigateToTop.ts
@@ -7,7 +7,9 @@ export const useNavigateToTop = () => {
const navigate = useNavigate();
const navigateAndReset = (to: string) => {
- navigate(to, { replace: true });
+ navigate(to
+ //, { replace: true }
+ );
window.scrollTo(0, 0);
};
diff --git a/src/index.js b/src/index.js
index 970a84461f094ade71f2fbd911a81717202520e6..1c6299df607faf3edb0fde9dc2464aa195ea0957 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,94 +2,18 @@ import * as React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
-import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
-import MainPage from "./pages/MainPage";
+//import MainPage from "./pages/MainPage";
import { ThemeProvider } from "@mui/material/styles";
import { MUItheme } from "./theme/mainTheme";
-import GettingStartedPage from "./pages/getting-started/GettingStartedPage";
-import ErrorPage from "./pages/error-page/ErrorPage";
-import DropzoneDemoPage from "./pages/demo/DropzoneDemoPage";
-import FileMosaicDemoPage from "./pages/demo/FileMosaicDemoPage";
-import FileCardDemoPage from "./pages/demo/FileCardDemoPage";
-import ServerSidePage from "./pages/server-side/ServerSidePage";
-import CodeGeneratorPage from "./pages/code-generator/CodeGeneratorPage";
-import DropzoneApi from "./pages/api/DropzoneApi";
-import FileMosaicApi from "./pages/api/FileMosaicApi";
-import FileCardApi from "./pages/api/FileCardApi";
-import TutorialPage from "./pages/tutorials/TutorialPage";
-import UsagePage from "./pages/usage/UsagePage";
-import TypesPage from "./pages/types-page/TypesPage";
-const router = createBrowserRouter([
- {
- path: "/",
- element: <MainPage />,
- errorElement: <ErrorPage />,
- },
- {
- path: "/getting-started",
- element: <GettingStartedPage />,
- },
- {
- path: "/usage",
- element: <UsagePage />,
- },
- {
- path: "/components/dropzone",
- element: <DropzoneDemoPage />,
- },
- {
- path: "/components/filemosaic",
- element: <FileMosaicDemoPage />,
- },
- {
- path: "/components/filecard",
- element: <FileCardDemoPage />,
- },
- {
- path: "/api/dropzone",
- element: <DropzoneApi />,
- },
- {
- path: "/api/filemosaic",
- element: <FileMosaicApi />,
- },
- {
- path: "/api/filecard",
- element: <FileCardApi />,
- },
- {
- path: "/types",
- element: <TypesPage />,
- },
- {
- path: "/server-side",
- element: <ServerSidePage />,
- },
- {
- path: "/code-generator",
- element: <CodeGeneratorPage />,
- },
- {
- path: "/utilities-methods/file-reader",
- element: <CodeGeneratorPage />,
- },
- {
- path: "/utilities-methods/file-uploader",
- element: <CodeGeneratorPage />,
- },
-]);
+
+import MainRouter from "./routes/MainRouter";
const root = ReactDOM.createRoot(document.getElementById("root"));
-fetch("https://files-ui-express-static-file-storage.vercel.app").then(res=>{
- res.json().then((jsonresponse)=>{
- console.log("API vercel", jsonresponse);
- })
-});
root.render(
<ThemeProvider theme={MUItheme}>
- <RouterProvider router={router} />
+ <MainRouter />
</ThemeProvider>
);
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 604b554d95d544edfa20c4f2816fe21a1204ed17..7c8cd2e58553188c8ccf4e11c4bfe4884443f687 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -2,6 +2,7 @@ import * as React from "react";
import "../styles/MainPage.scss";
import logoLight from "../static/files-ui-logo-blue-wbg.png";
import logo_blue from "../static/files-ui-logo-blue.png";
+import logo_blue_dark from "../static/files-ui-logo-blue-dark.png";
import DropzoneMainPage from "../components/DropzoneMainPage";
import GettingStarted from "../components/MainPage/GettingStarted";
@@ -23,23 +24,17 @@ const MainPage = ({ darkMode }) => {
<MainNavBar
darkModeOn={darkModeOn}
logo_blue={logo_blue}
- logoLight={logoLight}
+ logo_blue_dark={logo_blue_dark}
handleDarkMode={handleDarkMode}
/>
<main className="filesui-main">
<div className="fui-main-left">
- <div
- className={
- darkModeOn
- ? "filesui-main-logo-container darkmode"
- : "filesui-main-logo-container"
- }
- >
- <img
- className="fui-logo-img"
- // src={!darkModeOn ? logo_blue : logoLight}
- src={logo_blue}
- />
+ <div className={"filesui-main-logo-container"}>
+ {!darkMode ? (
+ <img className="fui-logo-img" src={logo_blue} />
+ ) : (
+ <img className="fui-logo-img" src={logo_blue_dark} />
+ )}
</div>
{/* <Badges /> */}
diff --git a/src/pages/api/DropzoneApi.jsx b/src/pages/api/DropzoneApi.jsx
index a4363e869bf4e4b40df63f8d7bf8e0923604567d..bddc013b832098c2fad30717749bd1a963a8ec31 100644
--- a/src/pages/api/DropzoneApi.jsx
+++ b/src/pages/api/DropzoneApi.jsx
@@ -1,10 +1,15 @@
import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import MainTitle from "../../components/main-title/MainTitle";
-const DropzoneApi = props =>{
- return(
- <div>
- DropzoneApi
- </div>
- )
-}
-export default DropzoneApi;
\ No newline at end of file
+const DropzoneApi = (props) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>Dropzone API</MainTitle>
+ </MainContentContainer>
+ </React.Fragment>
+ );
+};
+export default DropzoneApi;
diff --git a/src/pages/api/FileCardApi.jsx b/src/pages/api/FileCardApi.jsx
index 8da994b7945e079e178ed06d15d0273b3bf783c3..ce8d8f0e68c24d309144b8a001593c2514689b3a 100644
--- a/src/pages/api/FileCardApi.jsx
+++ b/src/pages/api/FileCardApi.jsx
@@ -1,10 +1,14 @@
import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainTitle from "../../components/main-title/MainTitle";
-const FileCardApi = props =>{
- return(
- <div>
-
- </div>
- )
-}
-export default FileCardApi;
\ No newline at end of file
+const FileCardApi = (props) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FileCard API</MainTitle>
+ </MainContentContainer>
+ </React.Fragment>
+ );
+};
+export default FileCardApi;
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
index d303d479b9cd2300911880490cdf553e08cc14d6..f30a2d029c9c920323dc97b5a1e0594f3b76189f 100644
--- a/src/pages/api/FileMosaicApi.jsx
+++ b/src/pages/api/FileMosaicApi.jsx
@@ -1,12 +1,14 @@
-import { Alert, AlertTitle } from "@mui/material";
+import { Alert } from "@mui/material";
import * as React from "react";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
import { FileMosaicAPIPropsRows } from "../../data/FileMosaicAPIPropsRows";
-import TableTemplate from "../../templates/TableTemplate";
+
import PropsTableApi from "./PropsTableApi";
const rightMenuItems = [
@@ -24,35 +26,35 @@ const rightMenuItems = [
const FileMosaicApi = (props) => {
return (
<React.Fragment>
- <MainLayoutPage
- rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
- MainLayoutPage={7}
- >
- <MainTitle>FileMosaic API</MainTitle>
- <DescParagraph>
- API reference docs for the React Filemosaic component. Learn about the
- props and other APIs of this exported module.
- </DescParagraph>
- <section id="filemosaic-demo">
- <SubTitle content="Demo" />
- <Alert severity="info">
-
- For examples and details on the usage of this React component, visit
- the component demo pages:
- <ul>
- <li>
- <a href="/components/filemosaic">FileMosaic. </a>
- </li>
- </ul>
- </Alert>
- </section>
- <section id="filemosaic-props">
- <SubTitle content="Props" />
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FileMosaic API</MainTitle>
+ <DescParagraph>
+ API reference docs for the React Filemosaic component. Learn about
+ the props and other APIs of this exported module.
+ </DescParagraph>
+ <section id="filemosaic-demo">
+ <SubTitle content="Demo" />
+ <Alert severity="info">
+ For examples and details on the usage of this React component,
+ visit the component demo pages:
+ <ul>
+ <li>
+ <a href="/components/filemosaic">FileMosaic. </a>
+ </li>
+ </ul>
+ </Alert>
+ </section>
+ <section id="filemosaic-props">
+ <SubTitle content="Props" />
- <PropsTableApi rows={FileMosaicAPIPropsRows} />
- </section>
- </MainLayoutPage>
-
+ <PropsTableApi rows={FileMosaicAPIPropsRows} />
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
</React.Fragment>
);
};
diff --git a/src/pages/code-generator/CodeGeneratorPage.jsx b/src/pages/code-generator/CodeGeneratorPage.jsx
index 721a0795f0041948c43dfeb69e7d6ae2031f6230..a5a76d1a1e5eaee6eba3b55dc33f57fb118c04d8 100644
--- a/src/pages/code-generator/CodeGeneratorPage.jsx
+++ b/src/pages/code-generator/CodeGeneratorPage.jsx
@@ -1,10 +1,20 @@
import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenu from "../../components/RightMenu/RightMenu";
-const CodeGeneratorPage = props =>{
- return(
- <div>
- CodeGeneratorPage
- </div>
- )
-}
-export default CodeGeneratorPage;
\ No newline at end of file
+const CodeGeneratorPage = (props) => {
+ return (
+ <MainLayoutPage selectedIndex={5}>
+ <MainContentContainer>
+ <MainTitle>Code Generator</MainTitle>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={[]} />
+ </RightMenuContainer>
+ </MainLayoutPage>
+ );
+};
+export default CodeGeneratorPage;
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 659ff39845a7bbffa51976c61fdeb9fa2e535b88..8b418613267023bc3059ce9e5618cf9faf8ad3e1 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -5,12 +5,14 @@ import DescParagraph from "../../components/demo-components/desc-paragraph/DescP
import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
-import NavBarTemplate from "../../templates/NavBarTemplate";
+
const rightMenuItems = [
{
id: 0,
@@ -52,90 +54,87 @@ const rightMenuItems = [
label: "Dark mode",
referTo: "/components/dropzone/#dark-mode",
},
- {
- id: 6,
- label: "API",
- referTo: "/components/dropzone/#api",
- },
+
];
const DropzoneDemoPage = (props) => {
return (
- <MainLayoutPage
- rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
- >
- <MainTitle>Dropzone</MainTitle>
-
- <MainParagraph>
- The "dropzone" component is a special{" "}
- <CodeHighlight>input</CodeHighlight> enhanced by the capability of
- allowing users to either drag and drop files there or picking files from
- a file dialog.
- </MainParagraph>
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>Dropzone</MainTitle>
- <DescParagraph>
- The widget is useful for handling one{" "}
- <TypeHighlight>File</TypeHighlight> or a list of{" "}
- <TypeHighlight>Files</TypeHighlight> in one or more of these scenarios:
- <ol>
- <li>
- The file(s) must be chosen from a File Dialog or must be dragged and
- dropped into the widget
- </li>
- <li>
- The file(s) must be validated or not taking into account a
- predefined set of allowed{" "}
- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
- Common MIME Types
- </a>
- ; specifiying the max file size (in bytes) or max amout of files.
- </li>
- <li>The file(s) must be uploaded somewhere in the internet.</li>
- <li>
- The file(s) must be shown in the screen with a preview according to
- the file type.
- </li>
- </ol>
- </DescParagraph>
- <DescParagraph>
- It's meant to be an improved version of the "react-dropzone" and
- "dropzone" packages.
- </DescParagraph>
+ <MainParagraph>
+ The "dropzone" component is a special{" "}
+ <CodeHighlight>input</CodeHighlight> enhanced by the capability of
+ allowing users to either drag and drop files there or picking files
+ from a file dialog.
+ </MainParagraph>
- <section id="basic-dropzone">
- <SubTitle content="Basic Dropzone" />
<DescParagraph>
- In this demo we set dropzone with the minimun props that allows you to
- get done fast. These props are <code className="code">onChange</code>{" "}
- and <code className="code">value</code> props.
+ The widget is useful for handling one{" "}
+ <TypeHighlight>File</TypeHighlight> or a list of{" "}
+ <TypeHighlight>Files</TypeHighlight> in one or more of these
+ scenarios:
+ <ol>
+ <li>
+ The file(s) must be chosen from a File Dialog or must be dragged
+ and dropped into the widget
+ </li>
+ <li>
+ The file(s) must be validated or not taking into account a
+ predefined set of allowed{" "}
+ <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
+ Common MIME Types
+ </a>
+ ; specifiying the max file size (in bytes) or max amout of files.
+ </li>
+ <li>The file(s) must be uploaded somewhere in the internet.</li>
+ <li>
+ The file(s) must be shown in the screen with a preview according
+ to the file type.
+ </li>
+ </ol>
+ </DescParagraph>
+ <DescParagraph>
+ It's meant to be an improved version of the "react-dropzone" and
+ "dropzone" packages.
</DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <BasicDemoDropzone />
- </Paper>
- <BasicDropzoneCodeJS />
- <Alert severity="info">
- <AlertTitle> FileMosaic </AlertTitle>
- For completeness, these examples include{" "}
- <strong>{`<FileMosaic/>`} </strong>
- component for showing the files selected by the user with minimun
- props too. For further information of this component check out the{" "}
- <a href="/components/filemosaic">FileMosaic</a> page.
- </Alert>
- <br />
- <Alert severity="info">
- <AlertTitle> ExtFile </AlertTitle>
- {/* This is an info alert — <strong>check it out!</strong>
- */}
- <strong>ExtFile type </strong>
- is explicity used in the
- <strong> Typescript</strong> example and is implicity used in the{" "}
- <strong>Javascript</strong> example for handling the metadata that
- makes possible the information exchange between components. For
- further information about this data type check out the{" "}
- <a href="/types#ext-file">ExtFile-API. </a>
- </Alert>
- </section>
- {/* <section id="validation">
+ <section id="basic-dropzone">
+ <SubTitle content="Basic Dropzone" />
+ <DescParagraph>
+ In this demo we set dropzone with the minimun props that allows you
+ to get done fast. These props are{" "}
+ <code className="code">onChange</code> and{" "}
+ <code className="code">value</code> props.
+ </DescParagraph>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone />
+ </Paper>
+ <BasicDropzoneCodeJS />
+ <Alert severity="info">
+ <AlertTitle> FileMosaic </AlertTitle>
+ For completeness, these examples include{" "}
+ <strong>{`<FileMosaic/>`} </strong>
+ component for showing the files selected by the user with minimun
+ props too. For further information of this component check out the{" "}
+ <a href="/components/filemosaic">FileMosaic</a> page.
+ </Alert>
+ <br />
+ <Alert severity="info">
+ <AlertTitle> ExtFile </AlertTitle>
+ {/* This is an info alert — <strong>check it out!</strong>
+ */}
+ <strong>ExtFile type </strong>
+ is explicity used in the
+ <strong> Typescript</strong> example and is implicity used in the{" "}
+ <strong>Javascript</strong> example for handling the metadata that
+ makes possible the information exchange between components. For
+ further information about this data type check out the{" "}
+ <a href="/types#ext-file">ExtFile-API. </a>
+ </Alert>
+ </section>
+
+ {/* <section id="validation">
<SubTitle content="Validation" />
<DescParagraph>
You can either "tell" Dropzone component to validate user files by
@@ -218,7 +217,12 @@ const DropzoneDemoPage = (props) => {
</ul>
</DescParagraph>
</section> */}
- </MainLayoutPage>
+ </MainContentContainer>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
);
};
export default DropzoneDemoPage;
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 05a8e0e4e225856bcb5d18139380fc3f4f1c9d62..e8baae8e7e697ade432493a6ffada8855cf951ff 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -1,10 +1,146 @@
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 BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/BasicFileMosaicDemo";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
-const FileCardDemoPage = props =>{
- return(
- <div>
- FileCardDemo
- </div>
- )
-}
-export default FileCardDemoPage;
\ No newline at end of file
+
+const FileCardDemoPage = (props) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FileCard</MainTitle>
+ <MainParagraph>
+ File mosaics are compact elements that represent a file in the UI.
+ They can be used for just showing general info of the file, or either
+ allow the user to interact with them.
+ </MainParagraph>
+ <DescParagraph>
+ This widget allow users to see information of Files and / or trigger
+ actions.
+ </DescParagraph>
+ <Alert severity="info">
+ While included here as a standalone component, the most common use
+ will be as a result of the "onChange" event of {"<Dropzone/>"} or{" "}
+ {"<InputButton/>"} components, so some of the behavior demonstrated
+ here is not shown in context.{" "}
+ </Alert>
+ <section id="basic-filemosaic">
+ <SubTitle content="Basic FileMosaic" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying
+ information from <TypeHighlight>File</TypeHighlight> object or
+ individual props.
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ }}
+ >
+ <Stack spacing={2} direction="row" alignItems={"center"}>
+ <BasicFileMosaicDemo />
+ </Stack>
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ <section id="image-preview">
+ <SubTitle content="Image preview" />
+ <DescParagraph>
+ By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
+ <TypeHighlight>true</TypeHighlight> the component will show a image
+ preview using the <CodeHighlight>imageUrl</CodeHighlight>
+ prop or by reading the <TypeHighlight>File</TypeHighlight> object if
+ given (file prop).
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ {/* <BasicDemoDropzone /> */}
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ <section id="validation">
+ <SubTitle content="Validation" />
+ <DescParagraph>
+ The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
+ <TypeHighlight>true</TypeHighlight>,{" "}
+ <TypeHighlight>false</TypeHighlight> or{" "}
+ <TypeHighlight>undefined</TypeHighlight>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ {/* <BasicDemoDropzone /> */}
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default FileCardDemoPage;
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Basic file mosaic",
+ referTo: "/components/file-mosaic/#basic-filemosaic",
+ },
+ {
+ id: 1,
+ label: "Image Preview",
+ referTo: "/components/file-mosaic/#file-mosaic-image-preview",
+ },
+ {
+ id: 2,
+ label: "Validation",
+ referTo: "/components/file-mosaic/#file-mosaic-validation",
+ },
+ {
+ id: 3,
+ label: "Uploading",
+ referTo: "/components/file-mosaic/#file-mosaic-uploading",
+ },
+ {
+ id: 4,
+ label: "Localization",
+ referTo: "/components/file-mosaic/#file-mosaic-localization",
+ },
+ {
+ id: 5,
+ label: "Previews",
+ referTo: "/components/file-mosaic/#file-mosaic-previews",
+ },
+ {
+ 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",
+ referTo: "/components/file-mosaic/#dark-mode",
+ },
+];
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index cf31a2eb43fe7bed517bfa73efc15ff445a2f3fc..175628861e63c46b42ad99f3acbc6a0e05fe7280 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -1,6 +1,4 @@
import Alert from "@mui/material/Alert";
-import AlertTitle from "@mui/material/AlertTitle";
-import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
import * as React from "react";
@@ -8,119 +6,93 @@ import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import BasicFileMosaicDemo from "../../components/demo-components/filemosaic-demo/BasicFileMosaicDemo";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
-import NavBarTemplate from "../../templates/NavBarTemplate";
const FileMosaicDemoPage = (props) => {
return (
- <NavBarTemplate>
- <Stack direction={"row"} sx={{ position: "relative" }}>
- <Box
- sx={{
- boxSizing: "border-box",
- marginLeft: { xl: "240px", lg: "0px" },
- marginRight: { lg: "240px" },
- width: {
- lg: `min(1000px, calc(100% - ${240}px))`,
- },
- }}
- >
- <Box
- sx={{
- boxSizing: "border-box",
- width: "100%",
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FileMosaic</MainTitle>
+ <MainParagraph>
+ File mosaics are compact elements that represent a file in the UI.
+ They can be used for just showing general info of the file, or either
+ allow the user to interact with them.
+ </MainParagraph>
+ <DescParagraph>
+ This widget allow users to see information of Files and / or trigger
+ actions.
+ </DescParagraph>
+ <Alert severity="info">
+ While included here as a standalone component, the most common use
+ will be as a result of the "onChange" event of {"<Dropzone/>"} or{" "}
+ {"<InputButton/>"} components, so some of the behavior demonstrated
+ here is not shown in context.{" "}
+ </Alert>
+ <section id="basic-filemosaic">
+ <SubTitle content="Basic FileMosaic" />
+ <DescParagraph>
+ The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying
+ information from <TypeHighlight>File</TypeHighlight> object or
+ individual props.
+ </DescParagraph>
+
+ <Paper
+ variant="outlined"
+ style={{
+ padding: "25px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
}}
>
- <h1 style={{ fontSize: "2.25rem" }}>FileMosaic</h1>
- <MainParagraph>
- File mosaics are compact elements that represent a file in the UI.
- They can be used for just showing general info of the file, or
- either allow the user to interact with them.
- </MainParagraph>
- <DescParagraph>
- This widget allow users to see information of Files and / or
- trigger actions.
- </DescParagraph>
- <Alert severity="info">
- While included here as a standalone component, the most common use
- will be as a result of the "onChange" event of {"<Dropzone/>"} or{" "}
- {"<InputButton/>"} components, so some of the behavior
- demonstrated here is not shown in context.{" "}
- </Alert>
-
- <section id="basic-filemosaic">
- <SubTitle content="Basic FileMosaic" />
- <DescParagraph>
- The <CodeHighlight>FileMosaic</CodeHighlight> supports
- displaying information from <TypeHighlight>File</TypeHighlight>{" "}
- object or individual props.
- </DescParagraph>
-
- <Paper
- variant="outlined"
- style={{
- padding: "25px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- }}
- >
- <Stack spacing={2} direction="row" alignItems={"center"}>
-
- <BasicFileMosaicDemo />
- </Stack>
- </Paper>
- <p></p>
- {/* <BasicDropzoneCodeJS /> */}
- </section>
- <section id="image-preview">
- <SubTitle content="Image preview" />
- <DescParagraph>
- By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
- <TypeHighlight>true</TypeHighlight> the component will show a
- image preview using the <CodeHighlight>imageUrl</CodeHighlight>
- prop or by reading the <TypeHighlight>File</TypeHighlight>{" "}
- object if given (file prop).
- </DescParagraph>
+ <Stack spacing={2} direction="row" alignItems={"center"}>
+ <BasicFileMosaicDemo />
+ </Stack>
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ <section id="image-preview">
+ <SubTitle content="Image preview" />
+ <DescParagraph>
+ By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "}
+ <TypeHighlight>true</TypeHighlight> the component will show a image
+ preview using the <CodeHighlight>imageUrl</CodeHighlight>
+ prop or by reading the <TypeHighlight>File</TypeHighlight> object if
+ given (file prop).
+ </DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- {/* <BasicDemoDropzone /> */}
- </Paper>
- <p></p>
- {/* <BasicDropzoneCodeJS /> */}
- </section>
- <section id="validation">
- <SubTitle content="Validation" />
- <DescParagraph>
- The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
- <TypeHighlight>true</TypeHighlight>,{" "}
- <TypeHighlight>false</TypeHighlight> or{" "}
- <TypeHighlight>undefined</TypeHighlight>
- </DescParagraph>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ {/* <BasicDemoDropzone /> */}
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ <section id="validation">
+ <SubTitle content="Validation" />
+ <DescParagraph>
+ The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
+ <TypeHighlight>true</TypeHighlight>,{" "}
+ <TypeHighlight>false</TypeHighlight> or{" "}
+ <TypeHighlight>undefined</TypeHighlight>
+ </DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- {/* <BasicDemoDropzone /> */}
- </Paper>
- <p></p>
- {/* <BasicDropzoneCodeJS /> */}
- </section>
- </Box>
- </Box>
- <Box
- sx={{
- position: "fixed",
- top: 100,
- right: 0,
- width: "240px",
- display: { lg: "flex", xs: "none" },
- }}
- >
- <RightMenu width="240px" items={rightMenuItems} />
- </Box>
- </Stack>
- </NavBarTemplate>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ {/* <BasicDemoDropzone /> */}
+ </Paper>
+ <p></p>
+ {/* <BasicDropzoneCodeJS /> */}
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
);
};
export default FileMosaicDemoPage;
diff --git a/src/pages/error-page/ErrorPage.scss b/src/pages/error-page/ErrorPage.scss
index b851264c9ec0c420a92dbdaca3c485fe19f4589d..307b7edf38fb205251b41453e441dd2b95db621c 100644
--- a/src/pages/error-page/ErrorPage.scss
+++ b/src/pages/error-page/ErrorPage.scss
@@ -5,6 +5,8 @@
.page_404 {
padding: 40px 0;
background: #fff;
+ width: 100%;
+ height: 100vh;
// font-family: "Arvo", serif;
}
@@ -14,8 +16,12 @@
.four_zero_four_bg {
background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
- height: 400px;
+
background-position: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
.four_zero_four_bg h1 {
diff --git a/src/pages/error-page/ErrorPage.tsx b/src/pages/error-page/ErrorPage.tsx
index d9e35e208fd85f40abd7961463bd00f4ae0a31a8..7365d50240dbabe0a61c4c2593aebc0335b56b2b 100644
--- a/src/pages/error-page/ErrorPage.tsx
+++ b/src/pages/error-page/ErrorPage.tsx
@@ -1,33 +1,65 @@
import * as React from "react";
import { ErrorPageProps } from "./ErrorPageProps";
import "./ErrorPage.scss";
-const ErrorPage: React.FC<ErrorPageProps> = (props: ErrorPageProps) => {
- return (
- <section className="page_404">
- <div className="container">
- <div className="row">
-
- <div className="col-sm-12 ">
-
- <div className="col-sm-10 col-sm-offset-1 text-center">
- <div className="four_zero_four_bg">
- <h1 className="text-center ">404</h1>
- </div>
+import { Box, Button, Stack } from "@mui/material";
+//import { useNavigateToTop } from "../../hooks/useNavigateToTop";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import { useNavigateGoBack } from "../../hooks/useNavigateGoBack";
+import { useNavigate } from "react-router-dom";
- <div className="contant_box_404">
- <h3 className="h2">Look like you're lost</h3>
+const ErrorPage: React.FC<ErrorPageProps> = (props: ErrorPageProps) => {
+ //const goBack = useNavigateGoBack();
+ const navigate = useNavigate();
+ const handleReturn = () => {
+ navigate(-1);
+ };
- <p>the page you are looking for not avaible!</p>
+ return (
+ <div
+ style={{
+ width: "100%",
+ display: "flex",
+ alignItems: "center",
+ flexDirection: "column",
+ justifyContent: "center",
+ }}
+ >
+ <Box
+ sx={{
+ width: "100%",
+ display: "flex",
+ alignItems: "center",
+ flexDirection: "column",
+ justifyContent: "flex-start",
+ height:{sm: "400px", xs:"300px", lg:"600px"},
+ //objectFit: "cover",
+ backgroundSize:"cover",
+ backgroundPosition:"center",
+ backgroundRepeat: "no-repeat",
+ backgroundImage:
+ "url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif)",
+ }}
+ >
+ <MainTitle style={{ fontSize: "5rem", marginBottom: 0, marginTop:"10px" }}>404</MainTitle>
- <a href="" className="link_404">
- Go to Home
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
+ {/* <img
+ src="https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif"
+ alt="error_image"
+ width={"100%"}
+ style={{backgroundPosition:"center"}}
+ /> */}
+ </Box>
+ <MainParagraph>Looks like you're lost</MainParagraph>
+ <DescParagraph>
+ the page you are looking for is not avaible!
+ </DescParagraph>
+ <Button onClick={handleReturn} variant="outlined">
+ Go back
+ </Button>
+ </div>
);
};
export default ErrorPage;
diff --git a/src/pages/getting-started/GettingStartedPage.jsx b/src/pages/getting-started/GettingStartedPage.jsx
index 74128adba53a4604aadf8bd9502b1c7fb40171fe..19fa607e21e92d58d28305361884a7d3301089f7 100644
--- a/src/pages/getting-started/GettingStartedPage.jsx
+++ b/src/pages/getting-started/GettingStartedPage.jsx
@@ -14,164 +14,79 @@ import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/
import Paper from "@mui/material/Paper";
import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
const GettingStartedPage = ({ darkModeOn }) => {
return (
- <NavBarTemplate>
- <Stack direction={"row"} sx={{ position: "relative" }}>
- <Box
- sx={{
- boxSizing: "border-box",
- marginLeft: { xl: "240px", lg: "0px" },
- marginRight: { lg: "240px" },
- width: {
- lg: `min(1000px, calc(100% - ${240}px))`,
- },
- }}
- >
- <Box
- sx={{
- boxSizing: "border-box",
- width: "100%",
- }}
- >
- <Stack sx={{ width: "100%", alignItems: "center" }}>
- <img
- className="fui-logo-img-getting-started"
- src={!darkModeOn ? logo_blue : logoLight}
- />
- <h1>Files UI - Getting started!</h1>
- </Stack>
-
- <section id="overview">
- <Overview />
- </section>
-
- <section id="installation">
- <SubTitle content="Installation" />
-
- <MainParagraph>
- Run one of the following commands to add Files UI to your
- project:
- </MainParagraph>
- <h3>npm:</h3>
- <InstallationNPM />
- <h3>yarn:</h3>
- <InstallationYarn />
- </section>
+ <MainLayoutPage selectedIndex={0}>
+ <MainContentContainer >
+ <Stack sx={{ width: "100%", alignItems: "center" }}>
+ <img
+ className="fui-logo-img-getting-started"
+ src={!darkModeOn ? logo_blue : logoLight}
+ />
+ <MainTitle>Files UI - Getting started!</MainTitle>
+ </Stack>
+ <section id="overview">
+ <Overview />
+ </section>
- <section id="peer-dependency">
- <SubTitle content="Peer dependency" />
+ <section id="installation">
+ <SubTitle content="Installation" />
- <DescParagraph>
- <code className="code">react </code> {">= 17.0.0 "}and{" "}
- <code className="code">react-dom</code>
- {" >= 17.0.0 "} are peer dependencies.
- </DescParagraph>
- </section>
- {/* <section id="usage">
- <DescParagraph>
- <SubTitle content="Usage" />
- The following code snippet demonstrates a simple app that uses
- the Files UI <a href="/components/dropzone">
- Dropzone
- </a> and <a href="/components/filemosaic">FileMosaic</a>{" "}
- components:
- <BasicDropzoneCodeJS />
- </DescParagraph>
- </section> */}
- <section id="default-font">
- <SubTitle content="Default font" />
+ <MainParagraph>
+ Run one of the following commands to add Files UI to your project:
+ </MainParagraph>
+ <h3>npm:</h3>
+ <InstallationNPM />
+ <h3>yarn:</h3>
+ <InstallationYarn />
+ </section>
- <DescParagraph>
- Files UI components use the Poppins font by default. However,
- you can set your own font-family en each component.
- </DescParagraph>
- </section>
-
- {/* <section id="basic-example">
- <SubTitle content="Basic example" />
- <DescParagraph>
- Files UI components use the Poppins font by default. However,
- you can set your own font-family en each component.
- </DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <BasicDemoDropzone />
- </Paper>
+ <section id="peer-dependency">
+ <SubTitle content="Peer dependency" />
- <DescParagraph>
- <code className="code">ExtFile</code> type is explicity used in
- the Typescript example and is implicity used in the JS example
- for handling the metadata that makes possible information
- exchange between the components. For further information of this
- type check out the <a href="/types#ext-file">ExtFile-API. </a>
- </DescParagraph>
- <BasicDropzoneCodeJS />
- </section>
- <section id="advanced-example">
- <SubTitle content="Advanced Example" />
- <DescParagraph>
- Files UI components use the Poppins font by default. However,
- you can set your own font-family en each component.
- </DescParagraph>
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <BasicDemoDropzone />
- </Paper>
+ <DescParagraph>
+ <code className="code">react </code> {">= 17.0.0 "}and{" "}
+ <code className="code">react-dom</code>
+ {" >= 17.0.0 "} are peer dependencies.
+ </DescParagraph>
+ </section>
+ <section id="default-font">
+ <SubTitle content="Default font" />
- <DescParagraph>
- <code className="code">ExtFile</code> type is explicity used in
- the Typescript example and is implicity used in the JS example
- for handling the metadata that makes possible information
- exchange between the components. For further information of this
- type check out the <a href="/types#ext-file">ExtFile-API. </a>
- </DescParagraph>
- <BasicDropzoneCodeJS />
- </section> */}
- </Box>
- </Box>
-
- <Box
- sx={{
- position: "fixed",
- top: 100,
- right: 0,
- width: "240px",
- display: { lg: "flex", xs: "none" },
- }}
- >
- <RightMenu
- width="240px"
- items={[
- {
- id: 0,
- label: "Overview",
- referTo: "/getting-started/#overview",
- },
- {
- id: 1,
- label: "Installation",
- referTo: "/getting-started/#installation",
- },
- {
- id: 2,
- label: "Peer dependency",
- referTo: "/getting-started/#peer-dependency",
- },
- { id: 3, label: "Usage", referTo: "/getting-started/#usage" },
- {
- id: 3,
- label: "Basic example",
- referTo: "/getting-started/#basic-example",
- },
- {
- id: 3,
- label: "Advanced examples",
- referTo: "/getting-started/#advanced-example",
- },
- ]}
- />
- </Box>
- </Stack>
- </NavBarTemplate>
+ <DescParagraph>
+ Files UI components use the Poppins font by default. However, you
+ can set your own font-family en each component.
+ </DescParagraph>
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </MainLayoutPage>
);
};
export default GettingStartedPage;
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Overview",
+ referTo: "/getting-started/#overview",
+ },
+ {
+ id: 1,
+ label: "Installation",
+ referTo: "/getting-started/#installation",
+ },
+ {
+ id: 2,
+ label: "Peer dependency",
+ referTo: "/getting-started/#peer-dependency",
+ },
+ { id: 3, label: "Default font", referTo: "/getting-started/#default-font" },
+
+];
diff --git a/src/pages/server-side/ServerSidePage.jsx b/src/pages/server-side/ServerSidePage.jsx
index 280307d91363ddbb9f2ad2c0d3dd906203fc88a3..8bf6b93be532de14349ed25e21586567c135768f 100644
--- a/src/pages/server-side/ServerSidePage.jsx
+++ b/src/pages/server-side/ServerSidePage.jsx
@@ -1,10 +1,22 @@
import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenu from "../../components/RightMenu/RightMenu";
-const ServerSidePage = props =>{
- return(
- <div>
- ServerSidePage
- </div>
- )
-}
-export default ServerSidePage;
\ No newline at end of file
+const ServerSidePage = (props) => {
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={4}>
+ <MainContentContainer>
+ <MainTitle>Server Side implementatios</MainTitle>
+ </MainContentContainer>{" "}
+ <RightMenuContainer>
+ <RightMenu width="240px" items={[]} />
+ </RightMenuContainer>
+ </MainLayoutPage>
+ </React.Fragment>
+ );
+};
+export default ServerSidePage;
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index 7f7e0a0e560e31494baecf419e1221a3a026fbab..90b03be7aaf0dd6a3bcf67eced550d5365812889 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -1,16 +1,22 @@
import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenu from "../../components/RightMenu/RightMenu";
-const TypesPage = props =>{
- return(
- <div>
- types-page
- #ExtFile
- For metadata exchanging
-
-
- #...
- For upload process
- </div>
- )
-}
-export default TypesPage;
\ No newline at end of file
+const TypesPage = (props) => {
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={6}>
+ <MainContentContainer>
+ <MainTitle>Types</MainTitle>
+ </MainContentContainer>
+ </MainLayoutPage>{" "}
+ <RightMenuContainer>
+ <RightMenu width="240px" items={[]} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default TypesPage;
diff --git a/src/pages/upload/UploadPage.jsx b/src/pages/upload/UploadPage.jsx
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0dd39100b870db32671eb0b614933eb2efb86915 100644
--- a/src/pages/upload/UploadPage.jsx
+++ b/src/pages/upload/UploadPage.jsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenu from "../../components/RightMenu/RightMenu";
+
+const UploadPage = (props) => {
+ return (
+ <MainLayoutPage>
+ <MainContentContainer>
+ <MainTitle>pload with Files ui</MainTitle>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={[]} />
+ </RightMenuContainer>
+ </MainLayoutPage>
+ );
+};
+export default UploadPage;
diff --git a/src/pages/usage/UsagePage.jsx b/src/pages/usage/UsagePage.jsx
index 72c42666c89099c0560f92ee989788e80e7fb22d..611c2a4e583f180829efda51cd28e4dc6b56782b 100644
--- a/src/pages/usage/UsagePage.jsx
+++ b/src/pages/usage/UsagePage.jsx
@@ -15,6 +15,9 @@ import { Alert, AlertTitle } from "@mui/material";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
import AdvancedDropzoneCodeJS from "../../components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainTitle from "../../components/main-title/MainTitle";
const rightMenuItems = [
{ id: 0, label: "Quick start", referTo: "/usage/#quick-start" },
{
@@ -25,39 +28,39 @@ const rightMenuItems = [
];
const UsagePage = (props) => {
return (
- <MainLayoutPage
- rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
- >
- <h1>Usage</h1>
- <MainParagraph>
- Learn the basics of working with Files UI components.
- </MainParagraph>
+ <MainLayoutPage selectedIndex={1}>
+ <MainContentContainer>
+ <MainTitle>Usage</MainTitle>
+ <MainParagraph>
+ Learn the basics of working with Files UI components.
+ </MainParagraph>
- <section id="quick-start">
- <DescParagraph>
- <SubTitle content="Quick start (Basic exaple)" />
- The following code snippet demonstrates a simple app that uses the
- Files UI <a href="/components/dropzone">Dropzone</a> and{" "}
- <a href="/components/filemosaic">FileMosaic</a> components:
- </DescParagraph>
- <DescParagraph>
- In this demo we set dropzone with the minimun props that allows you to
- get done fast. These props are <CodeHighlight>onChange</CodeHighlight>{" "}
- and <CodeHighlight>value</CodeHighlight> props. This example is the
- same as the one you will find in the{" "}
- <a href="/components/dropzone/#basic-dropzone">Basic dropzone</a>{" "}
- section.
- </DescParagraph>{" "}
- <BasicDropzoneCodeJS splittedOnly />
- {/* <Paper variant="outlined" style={{ padding: "25px" }}>
+ <section id="quick-start">
+ <DescParagraph>
+ <SubTitle content="Quick start (Basic exaple)" />
+ The following code snippet demonstrates a simple app that uses the
+ Files UI <a href="/components/dropzone">Dropzone</a> and{" "}
+ <a href="/components/filemosaic">FileMosaic</a> components:
+ </DescParagraph>
+ <DescParagraph>
+ In this demo we set dropzone with the minimun props that allows you
+ to get done fast. These props are{" "}
+ <CodeHighlight>onChange</CodeHighlight> and{" "}
+ <CodeHighlight>value</CodeHighlight> props. This example is the same
+ as the one you will find in the{" "}
+ <a href="/components/dropzone/#basic-dropzone">Basic dropzone</a>{" "}
+ section.
+ </DescParagraph>{" "}
+ <BasicDropzoneCodeJS splittedOnly />
+ {/* <Paper variant="outlined" style={{ padding: "25px" }}>
<BasicDemoDropzone />
</Paper>{" "} */}
- <DescParagraph>
- You can play around with this code in the interactive Code Sandbox
- demo below. Try changing the <CodeHighlight>label</CodeHighlight> on
- the Dropzone to see the changes:
- </DescParagraph>
- {/* <iframe
+ <DescParagraph>
+ You can play around with this code in the interactive Code Sandbox
+ demo below. Try changing the <CodeHighlight>label</CodeHighlight> on
+ the Dropzone to see the changes:
+ </DescParagraph>
+ {/* <iframe
title="codesandbox"
src="https://codesandbox.io/embed/dropzone-ui-basic-3j01v"
//src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
@@ -72,34 +75,39 @@ const UsagePage = (props) => {
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe> */}
- </section>
+ </section>
- <section id="advanced-example">
- <SubTitle content="Advanced Example" />
- <DescParagraph>
- In this example we set dropzone with the props that allows validation
- and upload. These props are:
- <ul>
- <li>
- For validating: <CodeHighlight>accept</CodeHighlight>,{" "}
- <CodeHighlight>maxFiles</CodeHighlight> and{" "}
- <CodeHighlight>maxFileSize</CodeHighlight>
- </li>
- <li>
- For uploading: <CodeHighlight>uploadConfig</CodeHighlight>
- </li>
- <li>
- For simulating the upload process:{" "}
- <CodeHighlight>fakeUpload</CodeHighlight>
- </li>
- </ul>
- </DescParagraph>
-
- <Paper variant="outlined" style={{ padding: "25px" }}>
- <AdvancedDropzoneDemo />
- </Paper>
- <AdvancedDropzoneCodeJS />
- </section>
+ <section id="advanced-example">
+ <SubTitle content="Advanced Example" />
+ <DescParagraph>
+ In this example we set dropzone with the props that allows
+ validation and upload. These props are:
+ <ul>
+ <li>
+ For validating: <CodeHighlight>accept</CodeHighlight>,{" "}
+ <CodeHighlight>maxFiles</CodeHighlight> and{" "}
+ <CodeHighlight>maxFileSize</CodeHighlight>
+ </li>
+ <li>
+ For uploading: <CodeHighlight>uploadConfig</CodeHighlight>
+ </li>
+ <li>
+ For simulating the upload process:{" "}
+ <CodeHighlight>fakeUpload</CodeHighlight>
+ </li>
+ </ul>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <AdvancedDropzoneDemo />
+ </Paper>
+ <AdvancedDropzoneCodeJS />
+ </section>
+ </MainContentContainer>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
</MainLayoutPage>
);
};
diff --git a/src/pages/utilities/FileReaderPage.tsx b/src/pages/utilities/FileReaderPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a97127e1ae098885cadc7dec2c8012ebb3860905
--- /dev/null
+++ b/src/pages/utilities/FileReaderPage.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenu from "../../components/RightMenu/RightMenu";
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Read as URL",
+ referTo: "/utilities-methods/file-reader/#read-as-url",
+ },
+];
+
+interface FileReaderPageProps {}
+const FileReaderPage: React.FC<FileReaderPageProps> = (
+ props: FileReaderPageProps
+) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>File Reader</MainTitle>
+ </MainContentContainer>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default FileReaderPage;
diff --git a/src/pages/utilities/FileUploaderPage.tsx b/src/pages/utilities/FileUploaderPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..43b2af58ec62b9b78bcc5e3cffcf29021860360a
--- /dev/null
+++ b/src/pages/utilities/FileUploaderPage.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import RightMenu from "../../components/RightMenu/RightMenu";
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Upload to AWS",
+ referTo: "/utilities-methods/file-reader/#read-as-url",
+ },
+];
+
+interface FileUploaderPageProps {}
+const FileUploaderPage: React.FC<FileUploaderPageProps> = (
+ props: FileUploaderPageProps
+) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>File Upoad</MainTitle>
+ </MainContentContainer>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default FileUploaderPage;
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index a016387045701fdbc99065682931d41ca37d2d5c..bc65ae2dfdb5f4f0201d7b11f1d52068325da56f 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -1,10 +1,118 @@
import * as React from "react";
+import MainPage from "./../pages/MainPage";
+import GettingStartedPage from "./../pages/getting-started/GettingStartedPage";
+import ErrorPage from "./../pages/error-page/ErrorPage";
+import DropzoneDemoPage from "./../pages/demo/DropzoneDemoPage";
+import FileMosaicDemoPage from "./../pages/demo/FileMosaicDemoPage";
+import FileCardDemoPage from "./../pages/demo/FileCardDemoPage";
+import ServerSidePage from "./../pages/server-side/ServerSidePage";
+import CodeGeneratorPage from "./../pages/code-generator/CodeGeneratorPage";
+import DropzoneApi from "./../pages/api/DropzoneApi";
+import FileMosaicApi from "./../pages/api/FileMosaicApi";
+import FileCardApi from "./../pages/api/FileCardApi";
+import UsagePage from "./../pages/usage/UsagePage";
+import TypesPage from "./../pages/types-page/TypesPage";
+import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import MainLayoutPage from "../components/layout-pages/MainLayoutPage";
+import FileReaderPage from "../pages/utilities/FileReaderPage";
+import FileUploaderPage from "../pages/utilities/FileUploaderPage";
-const MainRouter = props =>{
- return(
- <div>
-
- </div>
- )
-}
-export default MainRouter;
\ No newline at end of file
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: <MainPage />,
+ errorElement: (
+ <MainLayoutPage>
+ <ErrorPage />
+ </MainLayoutPage>
+ ),
+ },
+ {
+ path: "/getting-started",
+ element: <GettingStartedPage />,
+ },
+ {
+ path: "/usage",
+ element: <UsagePage />,
+ },
+ {
+ path: "/components",
+ element: (
+ <MainLayoutPage selectedIndex={2}>
+ <Outlet />
+ </MainLayoutPage>
+ ),
+ children: [
+ {
+ path: "/components/dropzone",
+ element: <DropzoneDemoPage />,
+ },
+ {
+ path: "/components/filemosaic",
+ element: <FileMosaicDemoPage />,
+ },
+ {
+ path: "/components/filecard",
+ element: <FileCardDemoPage />,
+ },
+ ],
+ },
+ {
+ path: "/api",
+ element: (
+ <MainLayoutPage selectedIndex={3}>
+ <Outlet />
+ </MainLayoutPage>
+ ),
+ children: [
+ {
+ path: "/api/dropzone",
+ element: <DropzoneApi />,
+ },
+ {
+ path: "/api/filemosaic",
+ element: <FileMosaicApi />,
+ },
+ {
+ path: "/api/filecard",
+ element: <FileCardApi />,
+ },
+ ],
+ },
+ {
+ path: "/server-side",
+ element: <ServerSidePage />,
+ },
+ {
+ path: "/code-generator",
+ element: <CodeGeneratorPage />,
+ },
+ {
+ path: "/types",
+ element: <TypesPage />,
+ },
+
+ {
+ path: "/utilities-methods",
+ element: (
+ <MainLayoutPage selectedIndex={7}>
+ <Outlet />
+ </MainLayoutPage>
+ ),
+ children: [
+ {
+ path: "/utilities-methods/file-reader",
+ element: <FileReaderPage />,
+ },
+ {
+ path: "/utilities-methods/file-uploader",
+ element: <FileUploaderPage />,
+ },
+ ],
+ },
+]);
+
+const MainRouter = (props) => {
+ return <RouterProvider router={router} />;
+};
+export default MainRouter;
diff --git a/src/static/files-ui-logo-blue-dark.png b/src/static/files-ui-logo-blue-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..0177065c45133b82881090e1fe2accaf6774e228
Binary files /dev/null and b/src/static/files-ui-logo-blue-dark.png differ
diff --git a/src/static/files-ui-logo-blue-shadow.png b/src/static/files-ui-logo-blue-shadow.png
new file mode 100644
index 0000000000000000000000000000000000000000..78cf1ee8e370abce2d69f6f0ec78463e0f5f0986
Binary files /dev/null and b/src/static/files-ui-logo-blue-shadow.png differ
diff --git a/src/static/files-ui-logo-text-med-dark.png b/src/static/files-ui-logo-text-med-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..a245f8689750b8fe7ea539e686d2e18c99d632ae
Binary files /dev/null and b/src/static/files-ui-logo-text-med-dark.png differ
diff --git a/src/static/files-ui-logo-text-med-white.png b/src/static/files-ui-logo-text-med-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..55c9a315789fdba70e0bf2a899b446117ad9e004
Binary files /dev/null and b/src/static/files-ui-logo-text-med-white.png differ
diff --git a/src/static/files-ui-logo-text-med.png b/src/static/files-ui-logo-text-med.png
new file mode 100644
index 0000000000000000000000000000000000000000..783dec6038a0c4a83c6b6599efc14bb82060ee48
Binary files /dev/null and b/src/static/files-ui-logo-text-med.png differ
diff --git a/src/styles/MainPage.scss b/src/styles/MainPage.scss
index 660e1549fcc64300c88fe368c8c6d0e5a7047861..5cd45f529ee14ad2bd72af3a3a2ceb2f16a449dc 100644
--- a/src/styles/MainPage.scss
+++ b/src/styles/MainPage.scss
@@ -52,7 +52,7 @@ $border-color-dark: #0a1929;
font-size: 1.6rem;
}
.filesui-nav-logo-container {
- margin-right: 10px;
+ margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index e224810e38f4762e63ed80d4c309d3a247f80938..273e8bd0fb4d47d8a18a1b7fe17708aab2a99aaa 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/src/templates/NavBarTemplate.jsx
@@ -26,6 +26,8 @@ import InputIcon from "@mui/icons-material/Input";
import FileOpenIcon from "@mui/icons-material/FileOpen";
import { useNavigate } from "react-router";
import { useNavigateToTop } from "../hooks/useNavigateToTop";
+import logo_text_blue from "../static/files-ui-logo-text-med.png";
+import logo_text_blue_dark from "../static/files-ui-logo-text-med-dark.png";
const drawerWidth = 280;
const StyledImage = styled("img")(({ theme }) => ({
@@ -54,25 +56,32 @@ function NavBarTemplate(props) {
const drawer = (
<div>
<Toolbar>
- <Stack
- direction={"row"}
- alignItems="center"
- sx={{ "&:hover": { cursor: "pointer" } }}
- onClick={() => navigate("/")}
- >
- <img
- style={{
- height: "40px",
- marginRight: "10px",
- }}
- className="filesui-nav-logo"
- src={!darkModeOn ? logo_blue : logoLight}
- alt="files-ui-main-logo"
- />
- <Typography variant="h6" noWrap component="div" color="primary">
- Files ui
- </Typography>
- </Stack>
+ <a href="/" style={{ textDecoration: "none" }}>
+ <Stack
+ direction={"row"}
+ alignItems="center"
+ sx={{ "&:hover": { cursor: "pointer" } }}
+ // onClick={() => navigate("/")}
+ >
+ <img
+ style={{
+ height: "40px",
+ marginRight: "5px",
+ }}
+ className="filesui-nav-logo"
+ src={!darkModeOn ? logo_blue : logoLight}
+ alt="files-ui-main-logo"
+ />
+ <img
+ src={darkModeOn ? logo_text_blue_dark : logo_text_blue}
+ alt="files-ui-main-logo-text"
+ height={20}
+ />
+ {/* <Typography variant="h6" noWrap component="div" color="primary">
+ Files ui
+ </Typography> */}
+ </Stack>
+ </a>
</Toolbar>
<Divider />