feat(Navbar): Add settings entry to navbar
This commit is contained in:
parent
99fc130061
commit
23478f002c
2 changed files with 8 additions and 6 deletions
|
@ -2,7 +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';
|
import SettingsEntry from './SettingsEntry';
|
||||||
|
|
||||||
const Navbar = ({ messages }: { messages: Message[] }) => {
|
const Navbar = ({ messages }: { messages: Message[] }) => {
|
||||||
const [title, setTitle] = useState<string>('');
|
const [title, setTitle] = useState<string>('');
|
||||||
|
@ -50,9 +50,11 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
|
||||||
</div>
|
</div>
|
||||||
<p className="hidden lg:flex">{title}</p>
|
<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">
|
<div className="flex flex-row items-center space-x-4">
|
||||||
|
<SettingsEntry
|
||||||
|
size={17}
|
||||||
|
className="active:scale-95 transition duration-100 cursor-pointer"
|
||||||
|
/>
|
||||||
<Share
|
<Share
|
||||||
size={17}
|
size={17}
|
||||||
className="active:scale-95 transition duration-100 cursor-pointer"
|
className="active:scale-95 transition duration-100 cursor-pointer"
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Settings } from 'lucide-react';
|
import { Settings } from 'lucide-react';
|
||||||
|
import type { LucideProps } from 'lucide-react';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import SettingsDialog from './SettingsDialog';
|
import SettingsDialog from './SettingsDialog';
|
||||||
|
|
||||||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
|
const SettingsEntry = ({ className, ...restProps }: LucideProps) => {
|
||||||
|
|
||||||
const SettingsEntry = ({ className }: InputProps) => {
|
|
||||||
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Settings
|
<Settings
|
||||||
|
{...restProps}
|
||||||
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
|
onClick={() => setIsSettingsOpen(!isSettingsOpen)}
|
||||||
className={cn('cursor-pointer', className)}
|
className={cn('cursor-pointer', className)}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue