header.tsx 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import styled from '@emotion/styled';
  2. import Button from 'sentry/components/button';
  3. import * as Layout from 'sentry/components/layouts/thirds';
  4. import Link from 'sentry/components/links/link';
  5. import {t} from 'sentry/locale';
  6. import space from 'sentry/styles/space';
  7. import {Organization} from 'sentry/types';
  8. type Props = {
  9. activeTab: 'stats' | 'issues' | 'health';
  10. organization: Organization;
  11. };
  12. function StatsHeader({organization, activeTab}: Props) {
  13. return (
  14. <Layout.Header>
  15. <Layout.HeaderContent>
  16. <StyledLayoutTitle>{t('Stats')}</StyledLayoutTitle>
  17. </Layout.HeaderContent>
  18. <Layout.HeaderActions>
  19. {activeTab !== 'stats' && (
  20. <Button
  21. title={t('Send us feedback via email')}
  22. size="small"
  23. href="mailto:alerting-feedback@sentry.io?subject=Team Stats Feedback"
  24. >
  25. {t('Give Feedback')}
  26. </Button>
  27. )}
  28. </Layout.HeaderActions>
  29. <Layout.HeaderNavTabs underlined>
  30. <li className={`${activeTab === 'stats' ? 'active' : ''}`}>
  31. <Link to={`/organizations/${organization.slug}/stats/`}>{t('Usage')}</Link>
  32. </li>
  33. <li className={`${activeTab === 'issues' ? 'active' : ''}`}>
  34. <Link to={`/organizations/${organization.slug}/stats/issues/`}>
  35. {t('Issues')}
  36. </Link>
  37. </li>
  38. <li className={`${activeTab === 'health' ? 'active' : ''}`}>
  39. <Link to={`/organizations/${organization.slug}/stats/health/`}>
  40. {t('Health')}
  41. </Link>
  42. </li>
  43. </Layout.HeaderNavTabs>
  44. </Layout.Header>
  45. );
  46. }
  47. export default StatsHeader;
  48. const StyledLayoutTitle = styled(Layout.Title)`
  49. margin-top: ${space(0.5)};
  50. `;