hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle default dark theme & install next-themes

Browse Source
This commit is contained in:
Ehsan
2024-09-27 15:41:17 +03:30
parent 68f75cd5f7
commit 3fe2b8ee85
9 changed files with 63 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layoutPanel/header/icons/Theme.js
+31
View File
@@ -0,0 +1,31 @@
import MoonP from "@/components/icons/MoonP";
import { Button } from "@mui/material";
import { useTheme } from "next-themes";
import { useState } from "react";
function Theme() {
const [mounted, setMounted] = useState(false);
const { theme, setTheme, resolvedTheme } = useTheme();
console.log(theme);
useState(() => setMounted(true), []);
return (
<Button
className="
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
!w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
!h-[32px] md:!h-[36px] lg:!h-[40px]
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
"
// onClick={handleThemeSwitch}
onClick={() => setTheme(theme === 'light' ? 'dark' : "light")}
variant="outlined"
>
<MoonP />
</Button>
);
}
export default Theme;
components/layoutPanel/header/icons/index.js
+55
View File
@@ -0,0 +1,55 @@
import { Button } from "@mui/material";
import React from "react";
import MoonP from "@/components/icons/MoonP";
import NotificationP from "@/components/icons/NotificationP";
import SettingP from "@/components/icons/SettingP";
import SearchHeaderP from "@/components/icons/SearchHeaderP";
import Theme from "./Theme";
function Icons() {
return (
<div className="flex items-center justify-start gap-[12px]">
<Theme />
<Button
className="
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
!w-[32px] md:!w-[36px] lg:!w-[40px]
!h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
"
variant="outlined"
>
<SearchHeaderP />
</Button>
<Button
className="
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
!w-[32px] md:!w-[36px] lg:!w-[40px]
!h-[32px] md:!h-[36px] lg:!h-[40px]
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
"
variant="outlined"
>
<SettingP />
</Button>
<Button
className="
!w-[32px] md:!w-[36px] lg:!w-[40px]
!h-[32px] md:!h-[36px] lg:!h-[40px]
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
!p-[8px] !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
before:!absolute before:!right-[-2px] before:!top-[-2px] before:!w-[6px] before:!h-[6px]
before:!bg-[#D32F2F]
"
variant="outlined"
>
<NotificationP />
</Button>
</div>
);
}
export default Icons;