emptyMessage.tsx 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import * as React from 'react';
  2. import {css} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import space from 'app/styles/space';
  5. import TextBlock from 'app/views/settings/components/text/textBlock';
  6. type Props = {
  7. title?: React.ReactNode;
  8. description?: React.ReactNode;
  9. icon?: React.ReactNode;
  10. action?: React.ReactElement;
  11. size?: 'large' | 'medium';
  12. leftAligned?: boolean;
  13. };
  14. type EmptyMessageProps = Omit<React.HTMLProps<HTMLDivElement>, keyof Props> & Props;
  15. type WrapperProps = Pick<EmptyMessageProps, 'size'>;
  16. const EmptyMessage = styled(
  17. ({
  18. title,
  19. description,
  20. icon,
  21. children,
  22. action,
  23. leftAligned: _leftAligned,
  24. ...props
  25. }: EmptyMessageProps) => (
  26. <div data-test-id="empty-message" {...props}>
  27. {icon && <IconWrapper>{icon}</IconWrapper>}
  28. {title && <Title>{title}</Title>}
  29. {description && <Description>{description}</Description>}
  30. {children && <Description noMargin>{children}</Description>}
  31. {action && <Action>{action}</Action>}
  32. </div>
  33. )
  34. )<WrapperProps>`
  35. display: flex;
  36. ${p =>
  37. p.leftAligned
  38. ? css`
  39. max-width: 70%;
  40. align-items: flex-start;
  41. padding: ${space(4)};
  42. `
  43. : css`
  44. text-align: center;
  45. align-items: center;
  46. padding: ${space(4)} 15%;
  47. `};
  48. flex-direction: column;
  49. color: ${p => p.theme.textColor};
  50. font-size: ${p =>
  51. p.size && p.size === 'large' ? p.theme.fontSizeExtraLarge : p.theme.fontSizeLarge};
  52. `;
  53. const IconWrapper = styled('div')`
  54. color: ${p => p.theme.gray200};
  55. margin-bottom: ${space(1)};
  56. `;
  57. const Title = styled('strong')`
  58. font-size: ${p => p.theme.fontSizeExtraLarge};
  59. margin-bottom: ${space(1)};
  60. `;
  61. const Description = styled(TextBlock)`
  62. margin: 0;
  63. `;
  64. const Action = styled('div')`
  65. margin-top: ${space(2)};
  66. `;
  67. export default EmptyMessage;