44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
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,
|
|
...props
|
|
}: SelectItemProps) {
|
|
const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
|
|
|
|
return (
|
|
<ListBoxItem
|
|
className={styles.listBoxItem}
|
|
textValue={children}
|
|
isDisabled={isDisabled}
|
|
{...props}
|
|
>
|
|
{({ isSelected }) => (
|
|
<>
|
|
{icon ? (
|
|
<MaterialIcon
|
|
icon={icon}
|
|
size={24}
|
|
color={iconColor}
|
|
aria-hidden="true"
|
|
/>
|
|
) : null}
|
|
<Typography
|
|
variant={
|
|
isSelected ? 'Body/Paragraph/mdBold' : 'Body/Paragraph/mdRegular'
|
|
}
|
|
>
|
|
<span>{children}</span>
|
|
</Typography>
|
|
</>
|
|
)}
|
|
</ListBoxItem>
|
|
)
|
|
}
|