Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 17x 4x 4x 4x 17x 2x 2x 2x | import { FC, ReactNode } from 'react';
import cn from 'classnames';
import CloseIcon from '../../svg/times.svg';
type WindowActionButtonProps = {
icon?: ReactNode;
text?: string;
onClick: () => void;
primary?: boolean;
className?: string;
};
export const WindowActionButton: FC<WindowActionButtonProps> = ({
icon,
text,
onClick,
primary = false,
className,
}) => {
const baseClassName = 'window__action-button';
const iconOnly = icon && !text;
return (
<button
className={cn(baseClassName, className, {
[`${baseClassName}--icon-only`]: !!iconOnly,
button: !iconOnly,
secondary: !iconOnly && !primary,
})}
onClick={onClick}
type="button"
>
{icon && icon}
{text && text}
</button>
);
};
type DefaultCloseButtonProps = {
iconOnly?: boolean;
text?: string;
onClick: () => void;
};
export const DefaultCloseButton: FC<DefaultCloseButtonProps> = ({
iconOnly = false,
text,
onClick,
...otherProps
}) => {
const baseClassName = 'window__default-close-button';
const iconOnlyClass = `${baseClassName}--icon-only`;
return (
<WindowActionButton
className={cn(baseClassName, { [iconOnlyClass]: !!iconOnly })}
icon={iconOnly ? <CloseIcon width="10" height="10" /> : null}
text={iconOnly ? undefined : 'Close'}
primary={!iconOnly}
onClick={onClick}
{...otherProps}
/>
);
};
export default {
WindowActionButton,
DefaultCloseButton,
};
|