Sid Gifari File Manager
🏠 Root
/
home
/
genremedia08
/
musicjukebox.overlookedtracks.com
/
common
/
resources
/
client
/
ui
/
color-picker
/
Editing: color-swatch.tsx
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>; }
Save
Cancel
