Codex
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
"use client";
|
|
/**
|
|
* ChatHeader 顶部栏
|
|
*
|
|
* 顶部保持返回、首充优惠、收藏入口三段结构。
|
|
*/
|
|
import type { ReactNode } from "react";
|
|
import { Lock, Phone } 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();
|
|
const voiceCallEnabled = process.env.NEXT_PUBLIC_ENABLE_VOICE_CALL === "true";
|
|
|
|
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>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{voiceCallEnabled ? (
|
|
<button
|
|
type="button"
|
|
className="inline-flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-white shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition hover:bg-[rgba(28,24,39,0.82)] active:scale-96"
|
|
aria-label={`Call ${character.shortName}`}
|
|
data-analytics-key="chat.start_voice_call"
|
|
data-analytics-label="Start voice call"
|
|
onClick={() => navigator.push(characterRoutes.call)}
|
|
>
|
|
<Phone size={19} strokeWidth={2.3} aria-hidden="true" />
|
|
</button>
|
|
) : null}
|
|
<FavoriteEntryButton
|
|
characterSlug={character.slug}
|
|
tone="dark"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|