40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import { Group, Image, Text } from '@mantine/core';
|
|
import { useConfigContext } from '../../config/provider';
|
|
import { useColorTheme } from '../../tools/color';
|
|
|
|
interface LogoProps {
|
|
size?: 'md' | 'xs';
|
|
withoutText?: boolean;
|
|
}
|
|
|
|
export function Logo({ size = 'md', withoutText = false }: LogoProps) {
|
|
const { config } = useConfigContext();
|
|
const { primaryColor, secondaryColor } = useColorTheme();
|
|
|
|
return (
|
|
<Group spacing={size === 'md' ? 'xs' : 4} noWrap>
|
|
<Image
|
|
width={size === 'md' ? 50 : 20}
|
|
src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo.png'}
|
|
style={{
|
|
position: 'relative',
|
|
}}
|
|
/>
|
|
{withoutText ? null : (
|
|
<Text
|
|
size={size === 'md' ? 22 : 'xs'}
|
|
weight="bold"
|
|
variant="gradient"
|
|
gradient={{
|
|
from: primaryColor,
|
|
to: secondaryColor,
|
|
deg: 145,
|
|
}}
|
|
>
|
|
{config?.settings.customization.pageTitle || 'Homarr'}
|
|
</Text>
|
|
)}
|
|
</Group>
|
|
);
|
|
}
|