forked from mirrors/thatmattlove-hyperglass
30 lines
1 KiB
TypeScript
30 lines
1 KiB
TypeScript
import { Badge, chakra, HStack } from '@chakra-ui/react';
|
|
import { components } from 'react-select';
|
|
|
|
import type { OptionProps, GroupBase } from 'react-select';
|
|
import type { SingleOption } from '~/types';
|
|
|
|
export const Option = <Opt extends SingleOption, IsMulti extends boolean>(
|
|
props: OptionProps<Opt, IsMulti>,
|
|
): JSX.Element => {
|
|
const { label, data } = props;
|
|
const tags = Array.isArray(data.tags) ? (data.tags as string[]) : [];
|
|
return (
|
|
<components.Option<Opt, IsMulti, GroupBase<Opt>> {...props}>
|
|
<chakra.span display={{ base: 'block', lg: 'inline' }}>{label}</chakra.span>
|
|
{tags.length > 0 && (
|
|
<HStack
|
|
alignItems="center"
|
|
ms={{ base: 0, lg: 2 }}
|
|
display={{ base: 'flex', lg: 'inline-flex' }}
|
|
>
|
|
{tags.map(tag => (
|
|
<Badge fontSize="xs" variant="subtle" key={tag} colorScheme="primary" textTransform="none">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</HStack>
|
|
)}
|
|
</components.Option>
|
|
);
|
|
};
|