feat(ui): theme switcher show in responsive mode

russellchkang · May 28, 2024 · 710b72d · 710b72d
1 parent af9862c
commit 710b72d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx
@@ -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"

diff --git a/ui/components/theme/Switcher.tsx b/ui/components/theme/Switcher.tsx
@@ -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')}
     />
   );