portainer/app/react/components/form-components/InputGroup/InputGroupButtonWrapper.tsx

24 lines
693 B
TypeScript
Raw Normal View History

import { PropsWithChildren } from 'react';
import clsx from 'clsx';
import { useInputGroupContext } from './InputGroup';
export function InputGroupButtonWrapper({
children,
}: PropsWithChildren<unknown>) {
useInputGroupContext();
return (
<span
className={clsx(
'input-group-btn [&>button]:!ml-0',
// the button should be rounded at the end (right) if it's the last child and start (left) if it's the first child
// if the button is in the middle of the group, it shouldn't be rounded
'[&:first-child>button]:!rounded-l-[5px] [&:last-child>button]:!rounded-r-[5px] [&>button]:!rounded-none'
)}
>
{children}
</span>
);
}