Codex
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
"use client";
|
|
/**
|
|
* ChatHeader 顶部栏
|
|
*
|
|
* 顶部保持返回、首充优惠、收藏入口三段结构。
|
|
*/
|
|
import type { ReactNode } from "react";
|
|
import { Lock } from "lucide-react";
|
|
|
|
import { BackButton } from "@/app/_components";
|
|
import { FavoriteEntryButton } from "@/app/_components/core";
|
|
import {
|
|
useActiveCharacter,
|
|
useActiveCharacterRoutes,
|
|
} from "@/providers/character-provider";
|
|
import { useAppNavigator } from "@/router/use-app-navigator";
|
|
|
|
export interface ChatHeaderProps {
|
|
isGuest: boolean;
|
|
offerBanner?: ReactNode;
|
|
}
|
|
|
|
export function ChatHeader({
|
|
isGuest,
|
|
offerBanner,
|
|
}: ChatHeaderProps) {
|
|
const navigator = useAppNavigator();
|
|
const character = useActiveCharacter();
|
|
const characterRoutes = useActiveCharacterRoutes();
|
|
|
|
return (
|
|
<header className="flex shrink-0 flex-col items-stretch bg-transparent p-0">
|
|
{isGuest ? (
|
|
<button
|
|
type="button"
|
|
data-analytics-key="chat.open_signup"
|
|
data-analytics-label="Open sign up"
|
|
className="flex w-full cursor-pointer items-center justify-center gap-(--spacing-sm,8px) border-0 bg-accent 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(characterRoutes.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>
|
|
) : null}
|
|
|
|
<div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--chat-inline-padding,16px) py-(--spacing-sm,8px)">
|
|
<BackButton
|
|
href={characterRoutes.splash}
|
|
variant="dark"
|
|
ariaLabel="Back to home"
|
|
analyticsKey="chat.back_to_home"
|
|
/>
|
|
|
|
<div className="flex min-w-0 justify-center">{offerBanner}</div>
|
|
|
|
<FavoriteEntryButton
|
|
characterSlug={character.slug}
|
|
tone="dark"
|
|
/>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|