38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import Image from "next/image";
|
|
|
|
export function GuideExportBranding({
|
|
backgroundUrl,
|
|
variant = "standard",
|
|
}: {
|
|
backgroundUrl: string;
|
|
variant?: "standard" | "constellation";
|
|
}) {
|
|
const constellation = variant === "constellation";
|
|
|
|
return (
|
|
<>
|
|
<Image
|
|
src={backgroundUrl}
|
|
alt=""
|
|
fill
|
|
loading="eager"
|
|
sizes={constellation ? "1500px" : "1200px"}
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-[#050817]/65" />
|
|
<Image
|
|
src="/icon/Watermark.png"
|
|
alt=""
|
|
width={constellation ? 280 : 180}
|
|
height={constellation ? 158 : 101}
|
|
loading="eager"
|
|
className={
|
|
constellation
|
|
? "guide-export-watermark absolute right-4 bottom-0 z-30 h-auto w-70 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
|
|
: "guide-export-watermark absolute top-4 right-4 z-30 h-auto w-45 object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
}
|