@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
48 lines (47 loc) • 1.67 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';
export const logoBrands = [
'amsterdam',
'ggd-amsterdam',
'museum-weesp',
'stadsarchief',
'stadsbank-van-lening',
'vga-verzekeringen',
];
const logoConfig = {
amsterdam: {
label: 'Gemeente Amsterdam logo',
svg: LogoAmsterdam,
},
'ggd-amsterdam': {
label: 'GGD Amsterdam logo',
svg: LogoGgdAmsterdam,
},
'museum-weesp': {
label: 'Gemeente Amsterdam Museum Weesp logo',
svg: LogoMuseumWeesp,
},
stadsarchief: {
label: 'Gemeente Amsterdam Stadsarchief logo',
svg: LogoStadsarchief,
},
'stadsbank-van-lening': {
label: 'Gemeente Amsterdam Stadsbank van Lening logo',
svg: LogoStadsbankVanLening,
},
'vga-verzekeringen': {
label: 'Gemeente Amsterdam VGA Verzekeringen logo',
svg: 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 config = typeof brand === 'string' ? logoConfig[brand] : brand;
const { label, svg: LogoComponent } = config;
return (_jsx(LogoComponent, { ...restProps, "aria-label": ariaLabel || label, className: clsx('ams-logo', className), ref: ref }));
});
Logo.displayName = 'Logo';