mirror of
				https://github.com/ItzCrazyKns/Perplexica.git
				synced 2025-11-04 04:38:15 +00:00 
			
		
		
		
	feat(ui): theme switcher show in responsive mode
This commit is contained in:
		@@ -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')}
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user