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

View File

@ -2,10 +2,16 @@
import { useTheme } from 'next-themes';
import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
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 { theme, setTheme } = useTheme();
@ -46,17 +52,20 @@ export function ThemeSwitcher() {
return isTheme('dark') ? (
<SunIcon
className="cursor-pointer"
className={cn('cursor-pointer', className)}
size={size}
onClick={() => handleThemeSwitch('light')}
/>
) : isTheme('light') ? (
<MoonIcon
className="cursor-pointer"
className={cn('cursor-pointer', className)}
size={size}
onClick={() => handleThemeSwitch('dark')}
/>
) : (
<MonitorIcon
className="cursor-pointer"
className={cn('cursor-pointer', className)}
size={size}
onClick={() => handleThemeSwitch('system')}
/>
);