lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-03-24 05:44:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode and sponsors list

Browse Source
This commit is contained in:
Randel Mandre
2025-05-01 04:45:29 +03:00
parent 4e65bc5412
commit 6bf3c12b28
17 changed files with 1137 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Header.tsx
View File

@@ -1,20 +1,57 @@
'use client';
// Icons
import { MdClose, MdMenu } from "react-icons/md";
import { MdClose, MdMenu, MdSunny, MdModeNight } from "react-icons/md";
// Theme Provider
import { useTheme } from "next-themes"
// Shadcn UI
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
// Fonts
import { vipnagorgialla } from "@/components/Vipnagorgialla";
const Header = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => (
<header className="h-16 flex items-center bg-[#EEE5E5] border-b-3 border-[#007CAB] justify-between px-12 text-[#2A2C3F]">
<button onClick={toggleSidebar}>
{isOpen ? (
<MdClose className="h-12 w-12 text-[#2A2C3F]" />
) : (
<MdMenu className="h-12 w-12 text-[#2A2C3F]" />
)}
</button>
<p className={`text-3xl ${vipnagorgialla.className} font-bold italic hidden`}>ENG</p>
</header>
);
const Header = ({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) => {
const { setTheme } = useTheme();
return (
<header className="h-16 flex items-center bg-[#EEE5E5] dark:bg-[#0E0F19] border-b-3 border-[#007CAB] dark:border-[#00A3E0] justify-between px-12 text-[#2A2C3F] dark:text-[#EEE5E5]">
<button onClick={toggleSidebar}>
{isOpen ? (
<MdClose className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5]" />
) : (
<MdMenu className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5]" />
)}
</button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<MdSunny className="scale-150 text-[#2A2C3F] dark:hidden"/>
<MdModeNight className="scale-150 dark:text-[#EEE5E5] not-dark:hidden"/>
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48 translate-y-4">
<DropdownMenuItem className="text-xl" onClick={() => setTheme('light')}>
Light
</DropdownMenuItem>
<DropdownMenuItem className="text-xl" onClick={() => setTheme('dark')}>
Dark
</DropdownMenuItem>
<DropdownMenuItem className="text-xl" onClick={() => setTheme('system')}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</header>
);
};
export default Header;