File size: 3,118 Bytes
d91cbff 1714902 d91cbff 1714902 d91cbff 5d11dcd d91cbff 1714902 77dd060 cd7e224 1714902 d91cbff 1714902 d91cbff 1714902 d91cbff 1714902 77dd060 d91cbff | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 'use client';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
interface Props {
onNewConversation: () => void;
onMenuClick?: () => void;
}
export function Header({ onNewConversation: _onNewConversation, onMenuClick }: Props) {
const { resolvedTheme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
<header className="z-20 flex min-h-12 h-auto shrink-0 items-center justify-between bg-[#0d0d0d] px-4 pt-[env(safe-area-inset-top)]">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-4">
{onMenuClick && (
<button
type="button"
onClick={onMenuClick}
aria-label="Toggle menu"
className="grid h-8 w-8 place-items-center rounded-[6px] text-zinc-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/5 hover:text-white/70 active:scale-[0.97] lg:hidden"
>
<MenuIcon />
</button>
)}
</div>
<div className="flex items-center gap-4">
{mounted ? (
<button
type="button"
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
aria-label={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
className="grid h-8 w-8 place-items-center rounded-[6px] text-zinc-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/5 hover:text-white/70 active:scale-[0.97]"
>
{resolvedTheme === 'dark' ? <MoonIcon /> : <SunIcon />}
</button>
) : null}
</div>
</div>
</header>
);
}
function MoonIcon() {
return (
<svg suppressHydrationWarning xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
);
}
function SunIcon() {
return (
<svg suppressHydrationWarning xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M565-395q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35Zm-226.5 56.5Q280-397 280-480t58.5-141.5Q397-680 480-680t141.5 58.5Q680-563 680-480t-58.5 141.5Q563-280 480-280t-141.5-58.5ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
);
}
function MenuIcon() {
return (
<span className="material-symbols-outlined">
menu
</span>
);
}
|