How to create a star rating input 星評価入力の作り方

:root {
  --star-size: 32px;
  --star-color: #f5b301;
  --star-gap: 4px;
}
.star-rating__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: var(--star-gap);
}
.star-rating__stars input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.star-rating__star { display: inline-flex; cursor: pointer; border-radius: 6px; }
.star-rating__star svg {
  width: var(--star-size);
  height: var(--star-size);
  fill: #d7dde0;
  transition: fill .15s ease, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.star-rating__stars input:checked ~ .star-rating__star svg,
.star-rating__star:hover svg,
.star-rating__star:hover ~ .star-rating__star svg {
  fill: var(--star-color);
}
.star-rating__stars input:checked + .star-rating__star svg { transform: scale(1.15); }
.star-rating__stars input:focus-visible + .star-rating__star {
  outline: 3px solid #3b6fe0;
  outline-offset: 3px;
}

import { Fragment, useId, useState } from 'react';
import './F-010.css';

const STAR_PATH = 'M12 2.5l2.9 6.2 6.8.6-5.1 4.6 1.5 6.7L12 17.3 5.9 20.6l1.5-6.7-5.1-4.6 6.8-.6L12 2.5z';

export default function StarRatingInput({ label = 'Rate this product', max = 5, defaultValue = 0, onChange }) {
  const name = useId();
  const [value, setValue] = useState(defaultValue);
  const stars = Array.from({ length: max }, (_, i) => max - i);

  function select(next) {
    setValue(next);
    onChange?.(next);
  }

  return (
    <fieldset className="star-rating">
      <legend>{label}</legend>
      <div className="star-rating__stars">
        {stars.map((star) => {
          const id = `${name}-${star}`;
          return (
            <Fragment key={star}>
              <input
                type="radio"
                id={id}
                name={name}
                value={star}
                checked={value === star}
                onChange={() => select(star)}
              />
              <label htmlFor={id} className="star-rating__star">
                <svg aria-hidden="true" viewBox="0 0 24 24"><path d={STAR_PATH} /></svg>
                <span className="star-rating__sr">{star} star{star === 1 ? '' : 's'}</span>
              </label>
            </Fragment>
          );
        })}
      </div>
      <p className="star-rating__value" role="status" aria-live="polite">
        {value ? `Rated ${value} out of ${max}` : 'Not rated'}
      </p>
      <button type="button" className="star-rating__clear" onClick={() => select(0)}>
        Clear
      </button>
    </fieldset>
  );
}

.star-rating { border: none; margin: 0; padding: 0; }
.star-rating legend { padding: 0; margin: 0 0 16px; font-weight: 600; }
.star-rating__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}
.star-rating__stars input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.star-rating__star { display: inline-flex; cursor: pointer; border-radius: 6px; }
.star-rating__star svg {
  width: 32px;
  height: 32px;
  fill: #d7dde0;
  transition: fill .15s ease, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.star-rating__stars input:checked ~ .star-rating__star svg,
.star-rating__star:hover svg,
.star-rating__star:hover ~ .star-rating__star svg {
  fill: #f5b301;
}
.star-rating__stars input:checked + .star-rating__star svg { transform: scale(1.15); }
.star-rating__stars input:focus-visible + .star-rating__star {
  outline: 3px solid #3b6fe0;
  outline-offset: 3px;
}
.star-rating__value { margin: 16px 0 0; font-size: 14px; color: #5b6b6f; min-height: 1.4em; }
.star-rating__clear {
  margin-top: 12px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #d7dde0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.star-rating__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}