60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
import { Sparkles } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type CanvasLogoLoadingViewProps = {
|
|
label?: string;
|
|
siteName?: string | null;
|
|
siteLogo?: string | null;
|
|
siteLogoDark?: string | null;
|
|
};
|
|
|
|
export function CanvasLogoLoadingView({
|
|
label = "正在加载画布...",
|
|
siteName = "AI Chatbot",
|
|
siteLogo,
|
|
siteLogoDark,
|
|
}: CanvasLogoLoadingViewProps) {
|
|
const resolvedSiteName = String(siteName || "AI Chatbot").trim();
|
|
const lightLogo = String(siteLogo || siteLogoDark || "").trim();
|
|
const darkLogo = String(siteLogoDark || siteLogo || "").trim();
|
|
const hasSeparateDarkLogo = Boolean(darkLogo && darkLogo !== lightLogo);
|
|
|
|
return (
|
|
<div className="flex h-dvh w-screen items-center justify-center bg-[#f4f4f5] text-[#20242a] dark:bg-[#08090b] dark:text-zinc-100">
|
|
<div className="flex flex-col items-center gap-3.5">
|
|
<div className="relative flex h-[78px] w-[78px] items-center justify-center">
|
|
<div className="absolute inset-0 animate-spin rounded-full bg-[conic-gradient(from_0deg,#ff7a00,#ffe04b,#48e6a5,#35a7ff,#b15cff,#ff4aa2,#ff7a00)] opacity-90 blur-[1px]" />
|
|
<div className="absolute inset-[6px] animate-ping rounded-full bg-[conic-gradient(from_180deg,#ff7a00,#35a7ff,#b15cff,#48e6a5,#ff7a00)] opacity-25" />
|
|
<div className="absolute inset-1 rounded-full bg-[#f4f4f5] dark:bg-[#08090b]" />
|
|
<div className="relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-full border border-black/8 bg-white shadow-[0_13px_38px_rgba(15,23,42,0.16)] dark:border-white/10 dark:bg-zinc-950 dark:shadow-[0_17px_49px_rgba(0,0,0,0.45)]">
|
|
{lightLogo ? (
|
|
<>
|
|
<img
|
|
alt={resolvedSiteName}
|
|
className={cn(
|
|
"h-[34px] w-[34px] object-contain",
|
|
hasSeparateDarkLogo && "dark:hidden"
|
|
)}
|
|
src={lightLogo}
|
|
/>
|
|
{hasSeparateDarkLogo ? (
|
|
<img
|
|
alt={resolvedSiteName}
|
|
className="hidden h-[34px] w-[34px] object-contain dark:block"
|
|
src={darkLogo}
|
|
/>
|
|
) : null}
|
|
</>
|
|
) : (
|
|
<Sparkles className="h-[22px] w-[22px] text-[#20242a] dark:text-white" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-[12px] font-medium tracking-[0.16em] text-[#6b7280] dark:text-zinc-400">
|
|
{label}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|