resources.tsx 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import styled from '@emotion/styled';
  2. import breadcrumbsImg from 'sentry-images/spot/breadcrumbs-generic.svg';
  3. import docsImg from 'sentry-images/spot/code-arguments-tags-mirrored.svg';
  4. import releasesImg from 'sentry-images/spot/releases.svg';
  5. import * as Layout from 'sentry/components/layouts/thirds';
  6. import ResourceCard from 'sentry/components/resourceCard';
  7. import {t} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import type {Organization} from 'sentry/types';
  10. type Props = {
  11. organization: Organization;
  12. };
  13. function Resources(_props: Props) {
  14. return (
  15. <ResourcesWrapper data-test-id="resources">
  16. <Layout.Title withMargins>{t('Resources')}</Layout.Title>
  17. <ResourceCards>
  18. <ResourceCard
  19. link="https://docs.sentry.io/product/releases/"
  20. imgUrl={releasesImg}
  21. title={t('The Sentry Workflow')}
  22. />
  23. <ResourceCard
  24. link="https://docs.sentry.io/product/issues/"
  25. imgUrl={breadcrumbsImg}
  26. title={t('Sentry vs Logging')}
  27. />
  28. <ResourceCard link="https://docs.sentry.io/" imgUrl={docsImg} title={t('Docs')} />
  29. </ResourceCards>
  30. </ResourcesWrapper>
  31. );
  32. }
  33. export default Resources;
  34. const ResourcesWrapper = styled('div')`
  35. border-top: 1px solid ${p => p.theme.border};
  36. padding: ${space(2)} ${space(4)};
  37. `;
  38. const ResourceCards = styled('div')`
  39. display: grid;
  40. grid-template-columns: minmax(100px, 1fr);
  41. gap: ${space(3)};
  42. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  43. grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  44. }
  45. `;