f7164ddd7d
* group selector dialog * cache groups to prevent ui jumping * welcome dialog display logic * show fewer groups, more filtering
30 lines
671 B
TypeScript
30 lines
671 B
TypeScript
import clsx from 'clsx'
|
|
import { ReactNode } from 'react'
|
|
|
|
export function PillButton(props: {
|
|
selected: boolean
|
|
onSelect: () => void
|
|
color?: string
|
|
xs?: boolean
|
|
className?: string
|
|
children: ReactNode
|
|
}) {
|
|
const { children, selected, onSelect, color, xs, className } = props
|
|
|
|
return (
|
|
<button
|
|
className={clsx(
|
|
'cursor-pointer select-none whitespace-nowrap rounded-full px-3 py-1.5 text-sm',
|
|
xs ? 'text-xs' : '',
|
|
selected
|
|
? ['text-white', color ?? 'bg-greyscale-6']
|
|
: 'bg-greyscale-2 hover:bg-greyscale-3',
|
|
className
|
|
)}
|
|
onClick={onSelect}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|