65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { useStore } from '@nanostores/react';
|
|
import classNames from 'classnames';
|
|
import { useMemo } from 'react';
|
|
import { ClientOnly } from 'remix-utils/client-only';
|
|
import { useAuth } from '~/lib/hooks';
|
|
import { aiState } from '~/lib/stores/ai-state';
|
|
import { themeStore } from '~/lib/stores/theme';
|
|
import { HistorySwitch } from '../sidebar/HistorySwitch';
|
|
import { ThemeSwitch } from '../ui/ThemeSwitch';
|
|
import { ChatDescription } from './ChatDescription.client';
|
|
import { HeaderActionButtons } from './HeaderActionButtons';
|
|
import { MinimalAvatarDropdown } from './MinimalAvatarDropdown';
|
|
|
|
export function Header() {
|
|
const { isAuthenticated } = useAuth();
|
|
const { chatStarted } = useStore(aiState);
|
|
const theme = useStore(themeStore);
|
|
const logoSrc = useMemo(() => (theme === 'dark' ? '/logo-dark.png' : '/logo.png'), [theme]);
|
|
|
|
return (
|
|
<>
|
|
<header
|
|
className={classNames(
|
|
'flex items-center justify-between px-3 py-2 gap-3 shrink-0 border-b h-[var(--header-height)]',
|
|
{
|
|
'border-transparent': !chatStarted,
|
|
'border-upage-elements-borderColor': chatStarted,
|
|
},
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2 z-logo text-upage-elements-textPrimary cursor-pointer">
|
|
<a href="/" className="text-xl font-semibold text-accent flex items-center">
|
|
<picture>
|
|
<img src={logoSrc} alt="UPage Logo" className="h-6" />
|
|
</picture>
|
|
</a>
|
|
<div className="flex gap-1">
|
|
{isAuthenticated && <HistorySwitch />}
|
|
<ThemeSwitch />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 px-4 truncate text-center text-upage-elements-textPrimary">
|
|
{chatStarted && <ClientOnly>{() => <ChatDescription />}</ClientOnly>}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 justify-end">
|
|
{chatStarted && (
|
|
<>
|
|
<ClientOnly>
|
|
{() => (
|
|
<div className="mr-1">
|
|
<HeaderActionButtons />
|
|
</div>
|
|
)}
|
|
</ClientOnly>
|
|
</>
|
|
)}
|
|
<MinimalAvatarDropdown />
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|