Factor out ColorWidget component.

lib/color-widget.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+type ColorWidgetProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  id: string;
+};
+
+export const ColorWidget: React.FC<ColorWidgetProps> = (props) => (
+  <>
+    <label htmlFor={props.id}>{props.label}: </label>
+    <input
+      id={props.id}
+      type="color"
+      value={props.value}
+      onChange={(e) => props.onChange(e.target.value)}
+    />
+  </>
+);

lib/pages/creature-page.tsx

@@ -20,6 +20,7 @@ import {
 } from "../creature-symbol";
 import { HoverDebugHelper } from "../hover-debug-helper";
 import { svgScale, SvgTransforms } from "../svg-transform";
+import { ColorWidget } from "../color-widget";
 
 const DEFAULT_BG_COLOR = "#858585";
 
@@ -200,11 +201,11 @@ export const CreaturePage: React.FC<{}> = () => {
     <>
       <h1>Creature!</h1>
       <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx}>
-        <label htmlFor="bgColor">Background: </label>
+        <ColorWidget
-        <input
+          label="Background"
-          type="color"
+          id="bgColor"
           value={bgColor}
-          onChange={(e) => setBgColor(e.target.value)}
+          onChange={setBgColor}
         />{" "}
       </SymbolContextWidget>
       <p>

lib/pages/waves-page.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { ColorWidget } from "../color-widget";
 
 const WAVE_STROKE = "#79beda";
 const WAVE_FILL = "#2b7c9e";
@@ -137,20 +138,13 @@ const Waves: React.FC<{}> = () => {
         {waves}
       </svg>
       <p>
-        <label htmlFor="stroke">Stroke: </label>
+        <ColorWidget
-        <input
-          type="color"
-          value={stroke}
-          onChange={(e) => setStroke(e.target.value)}
           id="stroke"
+          value={stroke}
+          onChange={setStroke}
+          label="Stroke"
         />{" "}
-        <label htmlFor="fill">Fill: </label>
+        <ColorWidget id="fill" value={fill} onChange={setFill} label="Fill" />
-        <input
-          type="color"
-          value={fill}
-          onChange={(e) => setFill(e.target.value)}
-          id="fill"
-        />
       </p>
       <NumericSlider
         id="numWaves"

lib/symbol-context-widget.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { ColorWidget } from "./color-widget";
 import { SvgSymbolContext, swapColors } from "./svg-symbol";
 import { float } from "./util";
 
@@ -14,19 +15,17 @@ export const SymbolContextWidget: React.FC<{
   return (
     <p>
       {children}
-      <label htmlFor="stroke">Stroke: </label>
+      <ColorWidget
-      <input
-        type="color"
-        value={ctx.stroke}
-        onChange={(e) => updateCtx({ stroke: e.target.value })}
         id="stroke"
+        label="Stroke"
+        value={ctx.stroke}
+        onChange={(stroke) => updateCtx({ stroke })}
       />{" "}
-      <label htmlFor="fill">Fill: </label>
+      <ColorWidget
-      <input
-        type="color"
-        value={ctx.fill}
-        onChange={(e) => updateCtx({ fill: e.target.value })}
         id="fill"
+        label="Fill"
+        value={ctx.fill}
+        onChange={(fill) => updateCtx({ fill })}
       />{" "}
       <button onClick={() => updateCtx(swapColors(ctx))}>
         Swap stroke/fill