46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import openinaryLoader from '../lib/openinary-loader';
|
|
|
|
interface DynamicLogoProps {
|
|
src: string;
|
|
color?: string;
|
|
width?: string;
|
|
height?: string;
|
|
size?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function DynamicLogo({
|
|
src,
|
|
color = "currentColor",
|
|
width = "100%",
|
|
height = "40px",
|
|
size = "contain",
|
|
className = ""
|
|
}: DynamicLogoProps) {
|
|
|
|
const imageUrl = src.startsWith('/') ? openinaryLoader({ src, width: 800 }) : src;
|
|
const proxiedUrl = imageUrl.replace('https://media.ayris.tech', '/media-proxy');
|
|
|
|
return (
|
|
<div
|
|
className={className}
|
|
style={{
|
|
backgroundColor: color,
|
|
maskImage: `url(${proxiedUrl})`,
|
|
WebkitMaskImage: `url(${proxiedUrl})`,
|
|
maskRepeat: "no-repeat",
|
|
maskPosition: "center",
|
|
maskSize: size,
|
|
WebkitMaskRepeat: "no-repeat",
|
|
WebkitMaskPosition: "center",
|
|
WebkitMaskSize: size,
|
|
width: width,
|
|
height: height,
|
|
transition: "background-color 0.3s ease",
|
|
}}
|
|
/>
|
|
);
|
|
}
|