mancala/apps/frontend/src/components/board/StoneView.tsx

import * as React from "react";
import { FunctionComponent } from "react";

const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
  return (
    <div className="stone" style={{ background: color }}>
      <style jsx>{`
          .stone {
            margin: 1px;
            width: calc(1 * var(--board-unit));
            height: calc(1 * var(--board-unit));
            border-radius: calc(10 * var(--board-unit));
            transition: background-color 0.5s;
          }
        `}</style>
    </div>
  );
};

export default StoneView;