pdf-reader-web/components/SvgShapeElement/index.tsx

import React from 'react';

type Props = {
  shape: string;
  width: number;
  height: number;
  bdcolor: string;
  bdwidth: number;
  transparency: number;
  fcolor?: string;
  ftransparency?: number;
};

const SvgShapeElement: React.FC<Props> = ({
  shape,
  width,
  height,
  bdcolor,
  bdwidth,
  transparency,
  fcolor,
  ftransparency,
}: Props) => {
  const generateShape = (): React.ReactNode => {
    switch (shape) {
      case 'Circle':
        return (
          <ellipse
            cx="50%"
            cy="50%"
            rx={(width - bdwidth) / 2}
            ry={(height - bdwidth) / 2}
            stroke={bdcolor}
            strokeWidth={bdwidth}
            strokeOpacity={transparency}
            fill={fcolor}
            fillOpacity={ftransparency}
          />
        );
      case 'Square': {
        const indent = bdwidth / 2;
        return (
          <rect
            x={indent}
            y={indent}
            width={`${width - bdwidth}px`}
            height={`${height - bdwidth}px`}
            stroke={bdcolor}
            strokeWidth={bdwidth}
            strokeOpacity={transparency}
            fill={fcolor}
            fillOpacity={ftransparency}
          />
        );
      }
      default: {
        return {};
      }
    }
  };

  return (
    <svg
      viewBox={`0 0 ${width} ${height}`}
    >
      {generateShape()}
    </svg>
  );
};

export default SvgShapeElement;