File "color-swatch.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/color-picker/color-swatch.tsx
File size: 875 bytes
MIME-type: text/plain
Charset: utf-8
import React from 'react';
import clsx from 'clsx';
import {ButtonBase} from '../buttons/button-base';
type Props = {
onChange?: (e: string) => void;
value?: string;
colors: string[];
};
export function ColorSwatch({onChange, value, colors}: Props) {
const presetButtons = colors.map(color => {
const isSelected = value === color;
return (
<ButtonBase
key={color}
onClick={() => {
onChange?.(color);
}}
className={clsx(
'relative block flex-shrink-0 w-26 h-26 border rounded',
isSelected && 'shadow-md'
)}
style={{backgroundColor: color}}
>
{isSelected && (
<span className="absolute inset-0 m-auto rounded-full w-8 h-8 bg-white" />
)}
</ButtonBase>
);
});
return <div className="flex flex-wrap gap-6">{presetButtons}</div>;
}