35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
"use client";
|
|
/**
|
|
* Splash 底部按钮组
|
|
*/
|
|
import { useAuthState } from "@/stores/auth/auth-context";
|
|
import { LoadingIndicator } from "@/app/_components/core/loading-indicator";
|
|
|
|
export interface SplashButtonProps {
|
|
onStartChat: () => void;
|
|
}
|
|
|
|
export function SplashButton({ onStartChat }: SplashButtonProps) {
|
|
const state = useAuthState();
|
|
const isLoading = !state.hasInitialized || state.isLoading;
|
|
|
|
return (
|
|
<div className="z-2 flex w-full flex-row items-center justify-center gap-[clamp(var(--spacing-md,12px),4.815vw,var(--spacing-26,26px))] px-[clamp(var(--spacing-sm,8px),2.963vw,var(--spacing-lg,16px))]">
|
|
<button
|
|
type="button"
|
|
onClick={onStartChat}
|
|
disabled={isLoading}
|
|
className="inline-flex min-h-(--responsive-control-height,48px) w-full max-w-120 flex-auto cursor-pointer items-center justify-center rounded-(--radius-full,999px) border-0 bg-[linear-gradient(to_right,var(--color-button-gradient-start),var(--color-button-gradient-end))] px-[clamp(var(--spacing-lg,16px),5.556vw,30px)] font-bold italic text-white shadow-[0_0_10px_rgba(248,89,168,0.3)] disabled:cursor-not-allowed disabled:opacity-70"
|
|
>
|
|
{isLoading ? (
|
|
<LoadingIndicator color="#ffffff" />
|
|
) : (
|
|
<span className="whitespace-nowrap text-(length:--responsive-section-title,var(--font-size-xxl)) font-bold text-white">
|
|
Start Chatting
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|