Function HexColorInput

apps/desktop/src/routes/editor/ConfigSidebar.tsx:3126–3194

(props: {
	value: string;
	onChange: (value: string) => void;
	brandColorSwatches?: OrganizationBrandColorSwatch[];
})

}

function HexColorInput(props: {
	value: string;
	onChange: (value: string) => void;
	brandColorSwatches?: OrganizationBrandColorSwatch[];
}) {
	const [text, setText] = createWritableMemo(() => props.value);
	let prevColor = props.value;
	let colorInput: HTMLInputElement | undefined;
	const selectBrandColor = (color: string) => {
		setText(color);
		prevColor = color;
		props.onChange(color);
	};

	return (
		<div class="flex flex-col gap-2">
			<div class="flex items-center gap-3">
				<div class="relative">
					<button
						type="button"
						class="size-[2rem] rounded-[0.5rem] cursor-pointer transition-[box-shadow]"
						style={{
							"background-color": text(),
							"box-shadow": `inset 0 0 0 1px ${getColorPreviewBorderColor(
								text(),
							)}`,
						}}
						onClick={() => colorInput?.click()}
					/>
					<input
						ref={(el) => {
							colorInput = el;
						}}
						type="color"
						class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
						value={text()}
						onInput={(e) => {
							const next = e.currentTarget.value;
							setText(next);
							prevColor = next;
							props.onChange(next);
						}}
					/>
				</div>
				<TextInput
					class="flex-1 px-3 py-2 rounded-lg border border-gray-3 bg-gray-2 text-sm text-gray-12"
					value={text()}
					onFocus={() => {
						prevColor = props.value;
					}}
					onInput={(e) => {
						setText(e.currentTarget.value);
					}}
					onBlur={(e) => {
						const next =
							normalizeOpaqueHexColor(e.currentTarget.value) ?? prevColor;
						setText(next);
						prevColor = next;