From 710b72d0535addfc8cc3c4ed2ca642508726e8e9 Mon Sep 17 00:00:00 2001
From: WanQuanXie <i2cherry941219@gmail.com>
Date: Tue, 28 May 2024 10:48:58 +0800
Subject: [PATCH] feat(ui): theme switcher show in responsive mode

---
 ui/components/Navbar.tsx         |  3 +++
 ui/components/theme/Switcher.tsx | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx
index 91e131f..4159161 100644
--- 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
index d1f44a3..91bfe10 100644
--- 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')}
     />
   );