Tailwindcss typescript spinner

Spinner.tsx

import React from "react";

const Spinner = (props: { size?: string, color?: string }) => {
  const { size = 'md', color = 'black' } = props;
  const width: {[key:string]: string}= {
    sm: "w-6",
    md: "w-8",
    lg: "w-10",
  };

  return (
    <div className=" px-5 py-4">
      <div className={`text-center ${width[size] || 'md'}`}>
        <svg className="animate-spin" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <circle style={{  
            display: 'block', 
          fill: 'transparent', 
          stroke: `${color}`, 
          strokeLinecap: 'round', 
          strokeDasharray: 483, 
          strokeDashoffset: 280,
          strokeWidth: '10px',
          transformOrigin: '50% 50%'}} 
          cx="50" cy="50" r="45"
        />
        </svg>
      </div>
    </div>
  );
};

export default Spinner;