List.styled.ts 957 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. import styled from 'styled-components';
  2. export const EnumCell = styled.div`
  3. text-transform: capitalize;
  4. `;
  5. export const DeleteCell = styled.div`
  6. svg {
  7. cursor: pointer;
  8. }
  9. `;
  10. export const Chip = styled.div<{
  11. chipType?: 'default' | 'success' | 'danger' | 'secondary' | string;
  12. }>`
  13. width: fit-content;
  14. text-transform: capitalize;
  15. padding: 2px 8px;
  16. font-size: 12px;
  17. line-height: 16px;
  18. border-radius: 16px;
  19. color: ${({ theme }) => theme.tag.color};
  20. background-color: ${({ theme, chipType }) => {
  21. switch (chipType) {
  22. case 'success':
  23. return theme.tag.backgroundColor.green;
  24. case 'danger':
  25. return theme.tag.backgroundColor.red;
  26. case 'secondary':
  27. return theme.tag.backgroundColor.secondary;
  28. default:
  29. return theme.tag.backgroundColor.gray;
  30. }
  31. }};
  32. `;
  33. export const PatternCell = styled.div`
  34. display: flex;
  35. align-items: center;
  36. ${Chip} {
  37. margin-left: 4px;
  38. }
  39. `;