soapbox/app/soapbox/components/ui/tag-input/tag.tsx

29 wiersze
701 B
TypeScript

import React from 'react';
import IconButton from '../icon-button/icon-button';
import Text from '../text/text';
interface ITag {
/** Name of the tag. */
tag: string
/** Callback when the X icon is pressed. */
onDelete: (tag: string) => void
}
/** A single editable Tag (used by TagInput). */
const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
return (
<div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
<Text theme='white'>{tag}</Text>
<IconButton
iconClassName='h-4 w-4'
src={require('@tabler/icons/x.svg')}
onClick={() => onDelete(tag)}
transparent
/>
</div>
);
};
export default Tag;