localadministrator
6fd45ff34c
- Wordmark SVG + favicon (#FF1F8F → #00D4FF gradient) - Page title: Slate — AI App Builder - Header logo via inline component (no external font deps) - Deploy button label -> Launch - Chat placeholder + example prompt rebranded - Replace upstream accent palette with magenta primary, add cyan2 for accents - Settings tab notes upstream remains stackblitz-labs/bolt.diy
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { useStore } from '@nanostores/react';
|
|
import { ClientOnly } from 'remix-utils/client-only';
|
|
import { chatStore } from '~/lib/stores/chat';
|
|
import { classNames } from '~/utils/classNames';
|
|
import { HeaderActionButtons } from './HeaderActionButtons.client';
|
|
import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
|
|
import { SlateWordmark } from './SlateWordmark';
|
|
|
|
export function Header() {
|
|
const chat = useStore(chatStore);
|
|
|
|
return (
|
|
<header
|
|
className={classNames('flex items-center p-5 border-b h-[var(--header-height)]', {
|
|
'border-transparent': !chat.started,
|
|
'border-bolt-elements-borderColor': chat.started,
|
|
})}
|
|
>
|
|
<div className="flex items-center gap-2 z-logo text-bolt-elements-textPrimary cursor-pointer">
|
|
<div className="i-ph:sidebar-simple-duotone text-xl" />
|
|
<a href="/" className="text-2xl font-semibold flex items-center text-bolt-elements-textPrimary">
|
|
<SlateWordmark className="h-8 w-auto" />
|
|
</a>
|
|
</div>
|
|
{chat.started && ( // Display ChatDescription and HeaderActionButtons only when the chat has started.
|
|
<>
|
|
<span className="flex-1 px-4 truncate text-center text-bolt-elements-textPrimary">
|
|
<ClientOnly>{() => <ChatDescription />}</ClientOnly>
|
|
</span>
|
|
<ClientOnly>
|
|
{() => (
|
|
<div className="mr-1">
|
|
<HeaderActionButtons />
|
|
</div>
|
|
)}
|
|
</ClientOnly>
|
|
</>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|