Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 1x 1x 11x 11x 11x 11x 11x 11x 11x 11x 11x 1x 5x | 'use client';
import { Group, Text, useComputedColorScheme } from '@mantine/core';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { LOGO_SRC_DARK, LOGO_SRC_LIGHT } from './consts';
import type { LogoProps } from './types';
export const Logo = ({
variant = 'default',
width,
height,
priority = false,
withText = false,
hideTextOnMobile = false,
href,
}: LogoProps) => {
const colorScheme = useComputedColorScheme('light', {
getInitialValueInEffect: true,
});
const pathname = usePathname();
const size = variant === 'icon' ? 40 : 120;
const logoSrc = colorScheme === 'dark' ? LOGO_SRC_DARK : LOGO_SRC_LIGHT;
const t = useTranslations('logo');
const image = (
<Image
src={logoSrc}
alt={variant === 'icon' ? t('alt.icon') : t('alt.full')}
width={width ?? size}
height={height ?? size}
priority={priority}
/>
);
const text = withText && (
<Text
component="span"
variant="gradient"
gradient={{ from: 'pink', to: 'violet', deg: 45 }}
fw={700}
size={variant === 'icon' ? 'xl' : '2rem'}
visibleFrom={hideTextOnMobile ? 'sm' : undefined}
style={{ lineHeight: 1 }}
>
{t('text')}
</Text>
);
const logo = withText ? (
<Group gap="xs" align="center">
{image}
{text}
</Group>
) : (
image
);
Eif (!href) return logo;
return (
<Link
href={href}
style={{ textDecoration: 'none', color: 'inherit' }}
onClick={(e) => pathname === href && e.preventDefault()}
>
{logo}
</Link>
);
};
export const LogoIcon = (props: Omit<LogoProps, 'variant'>) => (
<Logo {...props} variant="icon" priority />
);
|