12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- import * as React from 'react';
- import {css} from '@emotion/react';
- import styled from '@emotion/styled';
- import space from 'app/styles/space';
- import TextBlock from 'app/views/settings/components/text/textBlock';
- type Props = {
- title?: React.ReactNode;
- description?: React.ReactNode;
- icon?: React.ReactNode;
- action?: React.ReactElement;
- size?: 'large' | 'medium';
- leftAligned?: boolean;
- };
- type EmptyMessageProps = Omit<React.HTMLProps<HTMLDivElement>, keyof Props> & Props;
- type WrapperProps = Pick<EmptyMessageProps, 'size'>;
- const EmptyMessage = styled(
- ({
- title,
- description,
- icon,
- children,
- action,
- leftAligned: _leftAligned,
- ...props
- }: EmptyMessageProps) => (
- <div data-test-id="empty-message" {...props}>
- {icon && <IconWrapper>{icon}</IconWrapper>}
- {title && <Title>{title}</Title>}
- {description && <Description>{description}</Description>}
- {children && <Description noMargin>{children}</Description>}
- {action && <Action>{action}</Action>}
- </div>
- )
- )<WrapperProps>`
- display: flex;
- ${p =>
- p.leftAligned
- ? css`
- max-width: 70%;
- align-items: flex-start;
- padding: ${space(4)};
- `
- : css`
- text-align: center;
- align-items: center;
- padding: ${space(4)} 15%;
- `};
- flex-direction: column;
- color: ${p => p.theme.textColor};
- font-size: ${p =>
- p.size && p.size === 'large' ? p.theme.fontSizeExtraLarge : p.theme.fontSizeLarge};
- `;
- const IconWrapper = styled('div')`
- color: ${p => p.theme.gray200};
- margin-bottom: ${space(1)};
- `;
- const Title = styled('strong')`
- font-size: ${p => p.theme.fontSizeExtraLarge};
- margin-bottom: ${space(1)};
- `;
- const Description = styled(TextBlock)`
- margin: 0;
- `;
- const Action = styled('div')`
- margin-top: ${space(2)};
- `;
- export default EmptyMessage;
|