36 lines
978 B
TypeScript
36 lines
978 B
TypeScript
import { ListBoxItem } from 'react-aria-components'
|
|
import { Typography } from '../Typography'
|
|
import styles from './select.module.css'
|
|
import { MaterialIcon } from '../Icons/MaterialIcon'
|
|
import { SelectItemProps } from './types'
|
|
|
|
export function SelectItem({ children, icon, isDisabled }: SelectItemProps) {
|
|
return (
|
|
<ListBoxItem
|
|
className={styles.listBoxItem}
|
|
textValue={children}
|
|
isDisabled={isDisabled}
|
|
>
|
|
{({ isSelected }) => (
|
|
<>
|
|
{icon ? (
|
|
<MaterialIcon
|
|
icon={icon}
|
|
size={24}
|
|
color={isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'}
|
|
aria-hidden="true"
|
|
/>
|
|
) : null}
|
|
<Typography
|
|
variant={
|
|
isSelected ? 'Body/Paragraph/mdBold' : 'Body/Paragraph/mdRegular'
|
|
}
|
|
>
|
|
<span>{children}</span>
|
|
</Typography>
|
|
</>
|
|
)}
|
|
</ListBoxItem>
|
|
)
|
|
}
|