feat(ui): theme switcher show in responsive mode
This commit is contained in:
parent
af9862c019
commit
710b72d053
|
@ -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"
|
||||
|
|
|
@ -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')}
|
||||
/>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue