40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import React, { type ComponentProps } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import type { IconButtonSize, IconButtonVariant } from './IconButton';
|
|
|
|
const StyledIconButtonGroupContainer = styled.div`
|
|
align-items: flex-start;
|
|
background: ${({ theme }) => theme.background.transparent.primary};
|
|
border-radius: ${({ theme }) => theme.spacing(1)};
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(0.5)};
|
|
padding: ${({ theme }) => theme.spacing(0.5)};
|
|
`;
|
|
|
|
type IconButtonGroupProps = Omit<ComponentProps<'div'>, 'children'> & {
|
|
variant: IconButtonVariant;
|
|
size: IconButtonSize;
|
|
children: React.ReactElement | React.ReactElement[];
|
|
};
|
|
|
|
export function IconButtonGroup({
|
|
children,
|
|
variant,
|
|
size,
|
|
...props
|
|
}: IconButtonGroupProps) {
|
|
return (
|
|
<StyledIconButtonGroupContainer {...props}>
|
|
{React.Children.map(
|
|
Array.isArray(children) ? children : [children],
|
|
(child) =>
|
|
React.cloneElement(child, {
|
|
...(variant ? { variant } : {}),
|
|
...(size ? { size } : {}),
|
|
}),
|
|
)}
|
|
</StyledIconButtonGroupContainer>
|
|
);
|
|
}
|