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 { 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"
|
||||||
|
|
|
@ -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')}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue