From 23478f002cadf0230e6ca2bd765bc01b2e93fe3d Mon Sep 17 00:00:00 2001
From: Chuck <403chuck@gmail.com>
Date: Tue, 4 Jun 2024 17:25:56 +0800
Subject: [PATCH] feat(Navbar): Add settings entry to navbar

---
 ui/components/Navbar.tsx        | 8 +++++---
 ui/components/SettingsEntry.tsx | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/components/Navbar.tsx b/ui/components/Navbar.tsx
index 0123267..c080456 100644
--- a/ui/components/Navbar.tsx
+++ b/ui/components/Navbar.tsx
@@ -2,7 +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';
+import SettingsEntry from './SettingsEntry';
 
 const Navbar = ({ messages }: { messages: Message[] }) => {
   const [title, setTitle] = useState<string>('');
@@ -50,9 +50,11 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
       </div>
       <p className="hidden lg:flex">{title}</p>
 
-      <ThemeSwitcher size={17} className="lg:hidden ml-auto mr-4" />
-
       <div className="flex flex-row items-center space-x-4">
+        <SettingsEntry
+          size={17}
+          className="active:scale-95 transition duration-100 cursor-pointer"
+        />
         <Share
           size={17}
           className="active:scale-95 transition duration-100 cursor-pointer"
diff --git a/ui/components/SettingsEntry.tsx b/ui/components/SettingsEntry.tsx
index 4b8b1e2..10d8f0f 100644
--- a/ui/components/SettingsEntry.tsx
+++ b/ui/components/SettingsEntry.tsx
@@ -1,16 +1,16 @@
 import { useState } from 'react';
 import { Settings } from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import SettingsDialog from './SettingsDialog';
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const SettingsEntry = ({ className }: InputProps) => {
+const SettingsEntry = ({ className, ...restProps }: LucideProps) => {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   return (
     <>
       <Settings
+        {...restProps}
         onClick={() => setIsSettingsOpen(!isSettingsOpen)}
         className={cn('cursor-pointer', className)}
       />