mirror of
https://github.com/oxen-io/oxen-website.git
synced 2023-12-13 21:00:18 +01:00
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import classNames from 'classnames';
|
||
|
import React from 'react';
|
||
|
|
||
|
interface Props {
|
||
|
className?: string;
|
||
|
children: JSX.Element[];
|
||
|
equalWidth?: boolean;
|
||
|
}
|
||
|
|
||
|
export function ButtonGroup(props: Props) {
|
||
|
// Attach props to children following this guide
|
||
|
// https://stackoverflow.com/a/35102287
|
||
|
const { className, children, equalWidth } = props;
|
||
|
const numChildren = children.length;
|
||
|
const hasChildren = Boolean(numChildren);
|
||
|
|
||
|
const firstChild = children[0];
|
||
|
const lastChild = children[numChildren - 1];
|
||
|
|
||
|
return (
|
||
|
<div className={classNames('flex', className)}>
|
||
|
{hasChildren &&
|
||
|
React.cloneElement(firstChild, {
|
||
|
className: classNames(
|
||
|
'rounded-r-none border-r-0',
|
||
|
equalWidth && 'flex-1',
|
||
|
),
|
||
|
})}
|
||
|
{numChildren > 2 &&
|
||
|
children.slice(1, numChildren - 1).map(child =>
|
||
|
React.cloneElement(child, {
|
||
|
className: classNames(
|
||
|
'rounded-r-none rounded-l-none border-r-0',
|
||
|
equalWidth && 'flex-1',
|
||
|
),
|
||
|
}),
|
||
|
)}
|
||
|
{hasChildren &&
|
||
|
React.cloneElement(lastChild, {
|
||
|
className: classNames('rounded-l-none', equalWidth && 'flex-1'),
|
||
|
})}
|
||
|
</div>
|
||
|
);
|
||
|
}
|