well.tsx 560 B

123456789101112131415161718192021
  1. import * as React from 'react';
  2. import styled from '@emotion/styled';
  3. interface WellProps extends React.HTMLAttributes<HTMLDivElement> {
  4. children: React.ReactNode;
  5. centered?: boolean;
  6. hasImage?: boolean;
  7. theme?: any;
  8. }
  9. const Well = styled('div')<WellProps>`
  10. border: 1px solid ${p => p.theme.border};
  11. box-shadow: none;
  12. background: ${p => p.theme.backgroundSecondary};
  13. padding: ${p => (p.hasImage ? '80px 30px' : '15px 20px')};
  14. margin-bottom: 20px;
  15. border-radius: 3px;
  16. ${p => p.centered && 'text-align: center'};
  17. `;
  18. export default Well;