FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/_App/ControlPanelModal/DarkAndLightMode.js
+54
View File
@@ -0,0 +1,54 @@
import React, { useState, useEffect } from "react";
import Button from '@mui/material/Button';
import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
const DarkAndLightMode = () => {
// Light/Dark Mode
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
// Retrieve the user's preference from local storage
const storedPreference = localStorage.getItem("theme");
if (storedPreference === "dark") {
setIsDarkMode(true);
}
}, []);
const handleToggle = () => {
setIsDarkMode(!isDarkMode);
};
useEffect(() => {
// Update the user's preference in local storage
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
// Update the class on the <html> element to apply the selected mode
const htmlElement = document.querySelector("html");
if (isDarkMode) {
htmlElement.classList.add("dark");
} else {
htmlElement.classList.remove("dark");
}
}, [isDarkMode]);
return (
<>
<div className={styles.darkModeBox}>
<h3>Dark/Light Mode</h3>
<Button
onClick={handleToggle}
variant="contained"
sx={{
textTransform: 'capitalize'
}}
className="whiteColor"
>
Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
</Button>
</div>
</>
);
};
export default DarkAndLightMode;
components/_App/ControlPanelModal/DarkAndLightMode.module.css
+11
View File
@@ -0,0 +1,11 @@
.darkModeBox {
margin-bottom: 30px;
}
.darkModeBox h3 {
font-weight: 500;
border-bottom: 1px solid #eee !important;
padding-bottom: 5px;
margin: 0 0 15px 0;
font-size: 15px;
color: var(--headingColor) !important;
}
components/_App/ControlPanelModal/OnlyLeftSidebarDarkMode.js
+56
View File
@@ -0,0 +1,56 @@
import React, { useState, useEffect } from "react";
import Button from "@mui/material/Button";
import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
const OnlyLeftSidebarDarkMode = () => {
// Light/Dark Mode
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
// Retrieve the user's preference from local storage
const storedPreference = localStorage.getItem("leftSidebarTheme");
if (storedPreference === "leftsidebardark") {
setIsDarkMode(true);
}
}, []);
const handleToggle = () => {
setIsDarkMode(!isDarkMode);
};
useEffect(() => {
// Update the user's preference in local storage
localStorage.setItem(
"leftSidebarTheme", isDarkMode ? "leftsidebardark" : "light"
);
// Update the class on the <leftsidebardark> element to apply the selected mode
const htmlElement = document.querySelector("leftsidebardark");
if (isDarkMode) {
htmlElement.classList.add("leftsidebardark");
} else {
htmlElement.classList.remove("leftsidebardark");
}
}, [isDarkMode]);
return (
<>
<div className={styles.darkModeBox}>
<h3>Only Left Sidebar Dark/Light Mode</h3>
<Button
onClick={handleToggle}
variant="contained"
sx={{
textTransform: "capitalize",
}}
className="whiteColor"
>
Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
</Button>
</div>
</>
);
};
export default OnlyLeftSidebarDarkMode;
components/_App/ControlPanelModal/OnlyTopNavbarDark.js
+54
View File
@@ -0,0 +1,54 @@
import React, { useState, useEffect } from "react";
import Button from '@mui/material/Button';
import styles from "@/components/_App/ControlPanelModal/DarkAndLightMode.module.css";
const OnlyTopNavbarDark = () => {
// Light/Dark Mode
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
// Retrieve the user's preference from local storage
const storedPreference = localStorage.getItem("topNavbarDarkTheme");
if (storedPreference === "TopNavbarDark") {
setIsDarkMode(true);
}
}, []);
const handleToggle = () => {
setIsDarkMode(!isDarkMode);
};
useEffect(() => {
// Update the user's preference in local storage
localStorage.setItem("topNavbarDarkTheme", isDarkMode ? "TopNavbarDark" : "light");
// Update the class on the <html> element to apply the selected mode
const htmlElement = document.querySelector("topnavbardark");
if (isDarkMode) {
htmlElement.classList.add("dark");
} else {
htmlElement.classList.remove("dark");
}
}, [isDarkMode]);
return (
<>
<div className={styles.darkModeBox}>
<h3>Only Top Navbar Dark/Light Mode</h3>
<Button
onClick={handleToggle}
variant="contained"
sx={{
textTransform: 'capitalize'
}}
className="whiteColor"
>
Switch to {isDarkMode ? "Light Mode" : "Dark Mode"}
</Button>
</div>
</>
);
};
export default OnlyTopNavbarDark;
components/_App/ControlPanelModal/RTLSwitch.js
+40
View File
@@ -0,0 +1,40 @@
import React from "react";
import Button from '@mui/material/Button';
import styles from "@/components/_App/ControlPanelModal/RTLSwitch.module.css";
const RTLSwitch = () => {
return (
<>
<div className={styles.darkModeBox}>
<h3>LTR/RTL Demos</h3>
<div className="lang-sidebar">
<Button
variant="contained"
sx={{
textTransform: 'capitalize'
}}
className="whiteColor mr-10px"
href="/"
>
Switch to LTR
</Button>
<Button
variant="contained"
color="secondary"
sx={{
textTransform: 'capitalize'
}}
className="whiteColor"
href="/ar"
>
Switch to RTL
</Button>
</div>
</div>
</>
);
};
export default RTLSwitch;
components/_App/ControlPanelModal/RTLSwitch.module.css
+11
View File
@@ -0,0 +1,11 @@
.darkModeBox {
margin-bottom: 30px;
}
.darkModeBox h3 {
font-weight: 500;
border-bottom: 1px solid #eee !important;
padding-bottom: 5px;
margin: 0 0 15px 0;
font-size: 15px;
color: var(--headingColor) !important;
}
components/_App/ControlPanelModal/index.js
+98
View File
@@ -0,0 +1,98 @@
import React, { useState } from "react";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import CloseIcon from '@mui/icons-material/Close';
import { Box } from "@mui/material";
import Tooltip from "@mui/material/Tooltip";
import Button from "@mui/material/Button";
import RTLSwitch from '@/components/_App/ControlPanelModal/RTLSwitch';
import DarkAndLightMode from '@/components/_App/ControlPanelModal/DarkAndLightMode';
import OnlyLeftSidebarDarkMode from '@/components/_App/ControlPanelModal/OnlyLeftSidebarDarkMode';
import OnlyTopNavbarDark from '@/components/_App/ControlPanelModal/OnlyTopNavbarDark';
export default function ControlPanelModal() {
const [isActiveSearchModal, setActiveSearchModal] = useState("false");
const handleToggleSearchModal = () => {
setActiveSearchModal(!isActiveSearchModal);
};
return (
<>
<div
className={`control-panel-modal ${
isActiveSearchModal ? "" : "show"
}`}
>
<Tooltip title="Control Panel" placement="left" arrow>
<div
className='settings-btn'
onClick={handleToggleSearchModal}
>
<i className="ri-settings-3-line"></i>
</div>
</Tooltip>
<div
className="control-panel-dialog"
>
<AppBar sx={{ position: 'relative' }}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={handleToggleSearchModal}
aria-label="close"
>
<CloseIcon sx={{ color: "#fff !important" }} />
</IconButton>
<Typography
sx={{
flex: 1,
color: "#fff !important"
}}
variant="h6"
component="div"
className='ml-2'
>
Control Panel
</Typography>
</Toolbar>
</AppBar>
<Box p={3} className="control-panel-content">
{/* DarkAndLightMode */}
<DarkAndLightMode />
{/* OnlyLeftSidebarDarkMode */}
<OnlyLeftSidebarDarkMode />
{/* OnlyTopNavbarDark */}
<OnlyTopNavbarDark />
{/* RTLSwitch */}
<RTLSwitch />
</Box>
<div className="control-panel-footer">
<Button
onClick={handleToggleSearchModal}
variant="contained"
color="danger"
sx={{
textTransform: "capitalize",
color: "#fff !important"
}}
>
Cancel
</Button>
</div>
</div>
</div>
</>
);
}