58 lines
1.3 KiB
React
58 lines
1.3 KiB
React
|
import logoLight from '../assets/logo_white_mode.png';
|
||
|
|
import logoDark from '../assets/logo_white_dark_mode.png';
|
||
|
|
|
||
|
|
const sizes = {
|
||
|
|
sm: {
|
||
|
|
gap: '0.75rem',
|
||
|
|
logoHeight: 42,
|
||
|
|
titleSize: '1rem',
|
||
|
|
subtitleSize: '0.85rem',
|
||
|
|
},
|
||
|
|
md: {
|
||
|
|
gap: '1rem',
|
||
|
|
logoHeight: 54,
|
||
|
|
titleSize: '1.2rem',
|
||
|
|
subtitleSize: '0.95rem',
|
||
|
|
},
|
||
|
|
lg: {
|
||
|
|
gap: '1.25rem',
|
||
|
|
logoHeight: 78,
|
||
|
|
titleSize: '1.5rem',
|
||
|
|
subtitleSize: '1.05rem',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export function BrandMark({ compact = false, theme = 'light', size }) {
|
||
|
|
const logoSrc = theme === 'dark' ? logoDark : logoLight;
|
||
|
|
const variant = size || (compact ? 'sm' : 'md');
|
||
|
|
const currentSize = sizes[variant] || sizes.md;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: currentSize.gap,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={logoSrc}
|
||
|
|
alt="Sothis"
|
||
|
|
style={{
|
||
|
|
height: currentSize.logoHeight,
|
||
|
|
width: 'auto',
|
||
|
|
objectFit: 'contain',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<div style={{ fontSize: currentSize.titleSize, fontWeight: 800 }}>
|
||
|
|
Sothis Omnichannel
|
||
|
|
</div>
|
||
|
|
<div style={{ color: 'var(--color-text-soft)', fontSize: currentSize.subtitleSize }}>
|
||
|
|
Central de atendimento unificada
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|