feat(ui): theme switcher show in responsive mode

This commit is contained in:
WanQuanXie 2024-05-28 10:48:58 +08:00
parent af9862c019
commit 710b72d053
2 changed files with 16 additions and 4 deletions

View File

@ -2,6 +2,7 @@ import { Clock, Edit, Share, Trash } from 'lucide-react';
import { Message } from './ChatWindow'; import { Message } from './ChatWindow';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { formatTimeDifference } from '@/lib/utils'; import { formatTimeDifference } from '@/lib/utils';
import { ThemeSwitcher } from './theme/Switcher';
const Navbar = ({ messages }: { messages: Message[] }) => { const Navbar = ({ messages }: { messages: Message[] }) => {
const [title, setTitle] = useState<string>(''); const [title, setTitle] = useState<string>('');
@ -49,6 +50,8 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
</div> </div>
<p className="hidden lg:flex">{title}</p> <p className="hidden lg:flex">{title}</p>
<div className="flex flex-row items-center space-x-4"> <div className="flex flex-row items-center space-x-4">
<ThemeSwitcher size={17} className="lg:hidden" />
<Share <Share
size={17} size={17}
className="active:scale-95 transition duration-100 cursor-pointer" className="active:scale-95 transition duration-100 cursor-pointer"

View File

@ -2,10 +2,16 @@
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react'; import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
type Theme = 'dark' | 'light' | 'system'; type Theme = 'dark' | 'light' | 'system';
export function ThemeSwitcher() { interface ThemeSwitcherProps {
size?: number | string;
className?: string;
}
export function ThemeSwitcher({ size, className }: ThemeSwitcherProps) {
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
@ -46,17 +52,20 @@ export function ThemeSwitcher() {
return isTheme('dark') ? ( return isTheme('dark') ? (
<SunIcon <SunIcon
className="cursor-pointer" className={cn('cursor-pointer', className)}
size={size}
onClick={() => handleThemeSwitch('light')} onClick={() => handleThemeSwitch('light')}
/> />
) : isTheme('light') ? ( ) : isTheme('light') ? (
<MoonIcon <MoonIcon
className="cursor-pointer" className={cn('cursor-pointer', className)}
size={size}
onClick={() => handleThemeSwitch('dark')} onClick={() => handleThemeSwitch('dark')}
/> />
) : ( ) : (
<MonitorIcon <MonitorIcon
className="cursor-pointer" className={cn('cursor-pointer', className)}
size={size}
onClick={() => handleThemeSwitch('system')} onClick={() => handleThemeSwitch('system')}
/> />
); );