@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
40 lines (39 loc) • 1.49 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { LogoAmsterdam, LogoGgdAmsterdam, LogoMuseumWeesp, LogoStadsarchief, LogoStadsbankVanLening, LogoVgaVerzekeringen, } from './brand';
const logoConfig = {
amsterdam: {
label: 'Gemeente Amsterdam logo',
logo: LogoAmsterdam,
},
'ggd-amsterdam': {
label: 'GGD Amsterdam logo',
logo: LogoGgdAmsterdam,
},
'museum-weesp': {
label: 'Gemeente Amsterdam Museum Weesp logo',
logo: LogoMuseumWeesp,
},
stadsarchief: {
label: 'Gemeente Amsterdam Stadsarchief logo',
logo: LogoStadsarchief,
},
'stadsbank-van-lening': {
label: 'Gemeente Amsterdam Stadsbank van Lening logo',
logo: LogoStadsbankVanLening,
},
'vga-verzekeringen': {
label: 'Gemeente Amsterdam VGA Verzekeringen logo',
logo: LogoVgaVerzekeringen,
},
};
/**
* @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
*/
export const Logo = forwardRef(({ 'aria-label': ariaLabel, brand = 'amsterdam', className, ...restProps }, ref) => {
const LogoComponent = logoConfig[brand].logo;
const logoLabel = logoConfig[brand].label;
return (_jsx(LogoComponent, { ...restProps, "aria-label": ariaLabel || logoLabel, className: clsx('ams-logo', className), ref: ref }));
});
Logo.displayName = 'Logo';