| | |
|---|
| | | return ( |
|---|
| | | <div |
|---|
| | | className={cn( |
|---|
| | | 'system-sm-regular flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary', |
|---|
| | | !isSelected && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs', |
|---|
| | | isSelected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs', |
|---|
| | | )} |
|---|
| | | isSelected ? 'border-[2px] border-primary-400 bg-white shadow-xs' : 'border border-gray-100 bg-gray-25', |
|---|
| | | 'w-0 grow flex items-center justify-center h-8 cursor-pointer rounded-lg text-[13px] font-normal text-gray-900') |
|---|
| | | } |
|---|
| | | onClick={onClick} |
|---|
| | | > |
|---|
| | | {title} |
|---|
