67 lines
1.2 KiB
TypeScript
67 lines
1.2 KiB
TypeScript
/**
|
|
* KRA - Logo Component
|
|
* Display KRA logo with optional title
|
|
*/
|
|
import React from 'react';
|
|
|
|
interface LogoProps {
|
|
collapsed?: boolean;
|
|
showTitle?: boolean;
|
|
size?: 'small' | 'default' | 'large';
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const sizeMap = {
|
|
small: { logo: 24, fontSize: 14 },
|
|
default: { logo: 32, fontSize: 18 },
|
|
large: { logo: 48, fontSize: 24 },
|
|
};
|
|
|
|
const Logo: React.FC<LogoProps> = ({
|
|
collapsed = false,
|
|
showTitle = true,
|
|
size = 'default',
|
|
className,
|
|
style,
|
|
}) => {
|
|
const { logo: logoSize, fontSize } = sizeMap[size];
|
|
|
|
return (
|
|
<div
|
|
className={className}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
padding: '0 16px',
|
|
height: 64,
|
|
...style,
|
|
}}
|
|
>
|
|
<img
|
|
src="/logo.svg"
|
|
alt="KRA Logo"
|
|
style={{
|
|
width: logoSize,
|
|
height: logoSize,
|
|
}}
|
|
/>
|
|
{showTitle && !collapsed && (
|
|
<span
|
|
style={{
|
|
fontSize,
|
|
fontWeight: 600,
|
|
color: 'inherit',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
Kratos Admin
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Logo;
|