MrFrostDev
89 lines
1.8 KiB
TypeScript
89 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { Box } from '@mui/material';
|
|
|
|
interface LogoProps {
|
|
/** Total box size in pixels. */
|
|
size?: number;
|
|
/** Show the rounded white container backplate (for use over coloured surfaces). */
|
|
withBackplate?: boolean;
|
|
/** Padding inside the backplate (if any). */
|
|
padding?: number;
|
|
/** Optional border-radius override (defaults to 2 = 8px). */
|
|
rounded?: number;
|
|
/** className for parent positioning. */
|
|
className?: string;
|
|
/** Click handler. */
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function Logo({
|
|
size = 36,
|
|
withBackplate = false,
|
|
padding,
|
|
rounded,
|
|
className,
|
|
onClick,
|
|
}: LogoProps) {
|
|
const inner = (
|
|
<Image
|
|
src="/logo.png"
|
|
alt="PatchPilot Logo"
|
|
width={size}
|
|
height={size}
|
|
priority
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'contain',
|
|
display: 'block',
|
|
}}
|
|
/>
|
|
);
|
|
|
|
if (!withBackplate) {
|
|
return (
|
|
<Box
|
|
className={className}
|
|
onClick={onClick}
|
|
sx={{
|
|
width: size,
|
|
height: size,
|
|
flexShrink: 0,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
cursor: onClick ? 'pointer' : undefined,
|
|
}}
|
|
>
|
|
{inner}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
className={className}
|
|
onClick={onClick}
|
|
sx={{
|
|
width: size,
|
|
height: size,
|
|
flexShrink: 0,
|
|
p: padding ?? 0.5,
|
|
borderRadius: rounded ?? 2,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
bgcolor: 'background.paper',
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
boxShadow: 'var(--pp-shadow-soft)',
|
|
cursor: onClick ? 'pointer' : undefined,
|
|
}}
|
|
>
|
|
{inner}
|
|
</Box>
|
|
);
|
|
}
|