90 lines
2.1 KiB
TypeScript
90 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import type { CSSProperties } from 'react';
|
|
|
|
export interface MosaicLogoProps {
|
|
size?: number;
|
|
spinning?: boolean;
|
|
spinDuration?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function MosaicLogo({
|
|
size = 36,
|
|
spinning = false,
|
|
spinDuration = 20,
|
|
className = '',
|
|
}: MosaicLogoProps): React.JSX.Element {
|
|
const scale = size / 36;
|
|
const squareSize = Math.round(14 * scale);
|
|
const circleSize = Math.round(11 * scale);
|
|
const borderRadius = Math.round(3 * scale);
|
|
|
|
const animationValue = spinning
|
|
? `mosaicLogoSpin ${String(spinDuration)}s linear infinite`
|
|
: undefined;
|
|
|
|
const containerStyle: CSSProperties = {
|
|
width: size,
|
|
height: size,
|
|
position: 'relative',
|
|
flexShrink: 0,
|
|
animation: animationValue,
|
|
transformOrigin: 'center',
|
|
};
|
|
|
|
const baseSquareStyle: CSSProperties = {
|
|
position: 'absolute',
|
|
width: squareSize,
|
|
height: squareSize,
|
|
borderRadius,
|
|
};
|
|
|
|
const circleStyle: CSSProperties = {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: circleSize,
|
|
height: circleSize,
|
|
borderRadius: '50%',
|
|
background: 'var(--ms-pink-500)',
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{spinning ? (
|
|
<style>{`
|
|
@keyframes mosaicLogoSpin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
`}</style>
|
|
) : null}
|
|
<div style={containerStyle} className={className} role="img" aria-label="Mosaic logo">
|
|
<div style={{ ...baseSquareStyle, top: 0, left: 0, background: 'var(--ms-blue-500)' }} />
|
|
<div style={{ ...baseSquareStyle, top: 0, right: 0, background: 'var(--ms-purple-500)' }} />
|
|
<div
|
|
style={{
|
|
...baseSquareStyle,
|
|
bottom: 0,
|
|
right: 0,
|
|
background: 'var(--ms-teal-500)',
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
...baseSquareStyle,
|
|
bottom: 0,
|
|
left: 0,
|
|
background: 'var(--ms-amber-500)',
|
|
}}
|
|
/>
|
|
<div style={circleStyle} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MosaicLogo;
|