feat: Add background colors such as inverse-strong #3221 (#3346)

### What problem does this PR solve?

feat: Add background colors such as inverse-strong #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2024-11-12 11:29:48 +08:00
committed by GitHub
parent 70ea6661ed
commit db23d62827
4 changed files with 46 additions and 12 deletions

View File

@ -25,9 +25,19 @@ export interface SegmentedProps
motionName?: string;
}
export function Segmented({ options, value, onChange }: SegmentedProps) {
export function Segmented({
options,
value,
onChange,
className,
}: SegmentedProps) {
return (
<div className="flex items-center rounded-sm p-1 gap-2 bg-zinc-200">
<div
className={cn(
'flex items-center rounded-sm p-1 gap-2 bg-zinc-200',
className,
)}
>
{options.map((option) => {
const isObject = typeof option === 'object';
const actualValue = isObject ? option.value : option;
@ -36,9 +46,9 @@ export function Segmented({ options, value, onChange }: SegmentedProps) {
<div
key={actualValue}
className={cn(
'inline-flex items-center px-2 py-1 text-sm font-medium rounded-sm cursor-pointer',
'inline-flex items-center px-3 py-2 text-sm font-medium rounded-sm cursor-pointer',
{ 'bg-indigo-400': value === actualValue },
{ 'bg-backgroundCoreStandard': value === actualValue },
)}
onClick={() => onChange?.(actualValue)}
>