64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
"use client";
|
||
/**
|
||
* ChatHeader 顶部栏
|
||
*
|
||
* 图标：lucide-react <Lock />（游客 banner）+ <Menu />（菜单按钮）
|
||
* tree-shakable，currentColor 继承父 color
|
||
*/
|
||
import type { ReactNode } from "react";
|
||
import { Lock, Menu } from "lucide-react";
|
||
|
||
import { BackButton } from "@/app/_components";
|
||
import { ROUTES } from "@/router/routes";
|
||
import { useAppNavigator } from "@/router/use-app-navigator";
|
||
|
||
export interface ChatHeaderProps {
|
||
isGuest: boolean;
|
||
offerBanner?: ReactNode;
|
||
}
|
||
|
||
export function ChatHeader({ isGuest, offerBanner }: ChatHeaderProps) {
|
||
const navigator = useAppNavigator();
|
||
|
||
return (
|
||
<header className="flex shrink-0 flex-col items-stretch bg-transparent p-0">
|
||
{isGuest ? (
|
||
<button
|
||
type="button"
|
||
className="flex w-full cursor-pointer items-center justify-center gap-(--spacing-sm,8px) border-0 bg-(--color-accent,#f84d96) px-(--spacing-md,12px) py-(--spacing-sm,8px) text-center text-(length:--responsive-caption,var(--font-size-sm,12px)) font-medium text-white"
|
||
onClick={() => navigator.openAuth(ROUTES.chat)}
|
||
aria-label="Sign up to unlock more features"
|
||
>
|
||
<Lock
|
||
className="size-(--icon-size-sm,16px)"
|
||
size={16}
|
||
aria-hidden="true"
|
||
/>
|
||
<span>Sign up to unlock more features</span>
|
||
</button>
|
||
) : (
|
||
offerBanner
|
||
)}
|
||
|
||
{!isGuest ? (
|
||
<div className="flex items-center justify-between px-(--spacing-md,12px) py-(--spacing-sm,8px)">
|
||
<BackButton
|
||
href={ROUTES.splash}
|
||
variant="dark"
|
||
ariaLabel="Back to home"
|
||
/>
|
||
|
||
<button
|
||
type="button"
|
||
className="flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-(--radius-full,999px) border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-(--color-text-primary,#fff) shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition-[background,transform] duration-150 hover:bg-[rgba(28,24,39,0.82)] active:scale-96 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
|
||
onClick={() => navigator.push(ROUTES.sidebar)}
|
||
aria-label="Menu"
|
||
>
|
||
<Menu size={24} aria-hidden="true" />
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</header>
|
||
);
|
||
}
|