2021-11-23 05:16:50 +00:00
|
|
|
import { PropsWithChildren } from 'react';
|
2023-06-26 04:21:19 +00:00
|
|
|
import clsx from 'clsx';
|
2021-11-23 05:16:50 +00:00
|
|
|
|
|
|
|
import { useInputGroupContext } from './InputGroup';
|
|
|
|
|
|
|
|
export function InputGroupButtonWrapper({
|
|
|
|
children,
|
|
|
|
}: PropsWithChildren<unknown>) {
|
|
|
|
useInputGroupContext();
|
|
|
|
|
2023-06-26 04:21:19 +00:00
|
|
|
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
|
2023-09-04 15:20:36 +00:00
|
|
|
'[&:first-child>button]:!rounded-l-[5px] [&:last-child>button]:!rounded-r-[5px] [&>button]:!rounded-none'
|
2023-06-26 04:21:19 +00:00
|
|
|
)}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</span>
|
|
|
|
);
|
2021-11-23 05:16:50 +00:00
|
|
|
}
|