packages/components/containers/themes/ThemeSvg.tsx

   1 import type { CSSProperties } from 'react';
   2
   3 export type ThemeSvgSize = 'small' | 'medium-wide' | 'medium' | 'large';
   4 export type ThemeSvgColors = { prominent: string; standard: string; primary: string; weak: string };
   5
   6 interface Props {
   7     size?: ThemeSvgSize;
   8     colors: ThemeSvgColors;
   9     className?: string;
  10     style?: CSSProperties;
  11 }
  12
  13 const ThemeSvg = ({ size = 'medium-wide', colors, className, style }: Props) => {
  14     const dimensions = {
  15         small: { width: 50, height: 32 },
  16         'medium-wide': { width: 106, height: 44 },
  17         medium: { width: 106, height: 66 },
  18         large: { width: 122, height: 57 },
  19     }[size];
  20
  21     return (
  22         <svg
  23             xmlns="http://www.w3.org/2000/svg"
  24             className={className}
  25             style={style}
  26             fill="none"
  27             viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
  28         >
  29             <path fill={colors.standard} d={`M0 0h${dimensions.width}v${dimensions.height}H0z`} />
  30             <path fill={colors.prominent} d={`M0 0h36v${dimensions.height}H0z`} />
  31             <rect width="20" height="4" x="8" y="8" fill={colors.primary} rx="2" ry="2" />
  32             <g fill={colors.weak}>
  33                 <rect width="12" height="2" x="8" y="16" rx="1" ry="1" />
  34                 <rect width="16" height="2" x="8" y="20" rx="1" ry="1" opacity="0.75" />
  35                 <rect width="12" height="2" x="8" y="24" rx="1" ry="1" opacity="0.5" />
  36             </g>
  37         </svg>
  38     );
  39 };
  40
  41 export default ThemeSvg;