Better environment color picker (#282)

src-web/components/ColorIndicator.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import type { CSSProperties } from 'react';
+
+interface Props {
+  color: string | null;
+  onClick?: () => void;
+}
+
+export function ColorIndicator({ color, onClick }: Props) {
+  const style: CSSProperties = { backgroundColor: color ?? undefined };
+  const className =
+    'inline-block w-[0.75em] h-[0.75em] rounded-full mr-1.5 border border-transparent';
+
+  if (onClick) {
+    return (
+      <button
+        onClick={onClick}
+        style={style}
+        className={classNames(className, 'hover:border-text')}
+      />
+    );
+  } else {
+    return <span style={style} className={className} />;
+  }
+}