sendou.ink/app/components/CustomizedColorsInput.tsx

import * as React from "react";
import { useTranslation } from "react-i18next";
import { Button } from "./Button";
import { Label } from "./Label";

const CUSTOM_COLORS = [
	"bg",
	"bg-darker",
	"bg-lighter",
	"text",
	"text-lighter",
	"theme",
	"chat",
] as const;

type CustomColorsRecord = Partial<
	Record<(typeof CUSTOM_COLORS)[number], string>
>;

export function CustomizedColorsInput({
	initialColors,
}: {
	initialColors?: Record<string, string> | null;
}) {
	const { t } = useTranslation();
	const [colors, setColors] = React.useState<CustomColorsRecord>(
		initialColors ?? {},
	);

	return (
		<div className="w-full">
			<Label>{t("custom.colors.title")}</Label>
			<input type="hidden" name="css" value={JSON.stringify(colors)} />
			<div className="colors__grid">
				{CUSTOM_COLORS.map((cssVar) => {
					return (
						<React.Fragment key={cssVar}>
							<div>{t(`custom.colors.${cssVar}`)}</div>
							<input
								type="color"
								className="plain"
								value={colors[cssVar]}
								onChange={(e) => {
									const extras: Record<string, string> = {};
									if (cssVar === "bg-lighter") {
										extras["bg-lightest"] = `${e.target.value}80`;
									}
									setColors({ ...colors, ...extras, [cssVar]: e.target.value });
								}}
								data-testid={`color-input-${cssVar}`}
							/>
							<Button
								size="tiny"
								variant="minimal-destructive"
								onClick={() => {
									const newColors: Record<string, string | undefined> = {
										...colors,
									};
									if (cssVar === "bg-lighter") {
										newColors["bg-lightest"] = undefined;
									}
									setColors({ ...newColors, [cssVar]: undefined });
								}}
							>
								{t("actions.reset")}
							</Button>
						</React.Fragment>
					);
				})}
			</div>
		</div>
	);
}