TimeSymbol.jsx

export default function TimeSymbol({ type = 'wd' }) {
  const count = 3;
  const size = 6;
  const gutter = 1;
  const typeHighlights = {
    wd: [0, 1, 0],
    sat: [0, 0, 1],
    sun: [1, 0, 0],
  }[type.toLowerCase()];
  const typeColor = {
    wd: '#007aff',
    sat: '#8800FF',
    sun: '#00b348',
  }[type.toLowerCase()];
  const backgrounds = Array(count)
    .fill(0)
    .map((_, i) => {
      const highlight = typeHighlights[i];
      const color = highlight ? typeColor : '#ddd';
      const radius = size / 2;
      const x = radius + i * (size + gutter);
      const y = radius;
      const style = `radial-gradient(circle at ${x}px ${y}px, ${color}, ${color} ${
        radius - 0.5
      }px, rgba(255,255,255,0) ${radius}px, rgba(255,255,255,0))`;
      return style;
    });
  return (
    <div
      style={{
        display: 'inline-block',
        width: Math.ceil(size * count + gutter * (count - 1)),
        height: Math.ceil(size),
        backgroundImage: backgrounds.join(','),
        backgroundRepeat: 'no-repeat',
        verticalAlign: 'middle',
      }}
    />
  );
}