@@ -1,5 +1,6 @@
11import React from 'react';
2−import { Input, AccessoryIcon } from 'indigo-react';
2+import { Input, AccessoryIcon, Flex } from 'indigo-react';
3+import cn from 'classnames';
34import { useField } from 'react-final-form';
45
56import {
@@ -196,3 +197,51 @@ export function EmailInput({ ...rest }) {
196197 />
197198 );
198199}
200+
201+export const ColorInput = ({
202+ name,
203+ colors,
204+ disabled = false,
205+ label,
206+ className,
207+}) => {
208+ const { input } = useField(name, { subscription: { value: true } });
209+
210+ const isWhite = c => c === '#FFFFFF';
211+
212+ // disabled = disabled || submitting || submitSucceeded;
213+ return (
214+ <Flex col className={cn(className, 'flex-wrap mb1')}>
215+ <Flex.Item
216+ as="label"
217+ className={cn('f6 lh-tall', {
218+ black: !disabled,
219+ gray4: disabled,
220+ })}
221+ htmlFor={name}>
222+ {label}
223+ </Flex.Item>
224+ <div className="flex">
225+ {colors.map(c => (
226+ <button
227+ className={cn('m0 p0 h7 w7 p2 flex flex-center', {
228+ 'b b-black': isWhite(c),
229+ })}
230+ style={{ backgroundColor: c }}
231+ onClick={() => input.onChange(c)}>
232+ {c === input.value ? (
233+ <div
234+ className={cn(
235+ { 'bg-black': isWhite(c), 'bg-white': !isWhite(c) },
236+ 'w2 h2 r-full'
237+ )}
238+ />
239+ ) : (
240+ <div />
241+ )}
242+ </button>
243+ ))}
244+ </div>
245+ </Flex>
246+ );
247+};