42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
type BrandingLogoProps = {
|
|
className?: string;
|
|
alt?: string;
|
|
};
|
|
|
|
export default function BrandingLogo({ className, alt = "Magent logo" }: BrandingLogoProps) {
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [failed, setFailed] = useState(false);
|
|
|
|
return (
|
|
<span className={`${className ?? ""} branding-logo-shell`} role="img" aria-label={alt}>
|
|
{!failed ? (
|
|
<img
|
|
className={loaded ? "is-loaded" : undefined}
|
|
src="/api/branding/logo.png"
|
|
alt=""
|
|
aria-hidden="true"
|
|
onLoad={() => setLoaded(true)}
|
|
onError={() => setFailed(true)}
|
|
/>
|
|
) : null}
|
|
{!loaded ? (
|
|
<svg aria-hidden="true" viewBox="0 0 64 64" focusable="false">
|
|
<defs>
|
|
<linearGradient id="magentLogoGlow" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stopColor="#7ed7ff" />
|
|
<stop offset="100%" stopColor="#c6c1ff" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="64" height="64" rx="12" fill="#0b1328" />
|
|
<rect x="6" y="6" width="52" height="52" rx="9" fill="#111a33" />
|
|
<path d="M16 48V16h8l8 13 8-13h8v32h-8V30l-8 12-8-12v18h-8z" fill="url(#magentLogoGlow)" />
|
|
</svg>
|
|
) : null}
|
|
</span>
|
|
);
|
|
}
|