Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

55 строки
1.1 KiB

  1. import * as React from 'react'
  2. import styled from 'styled-components'
  3. import pkg from '../../package.json'
  4. const Base = styled('div')({
  5. position: 'relative',
  6. })
  7. // @ts-ignore
  8. const Title = styled('strong')({
  9. fontSize: '2rem',
  10. fontFamily: 'var(--font-family-headings), sans-serif',
  11. fontWeight: 'var(--font-weight-headings, 400)',
  12. lineHeight: 'var(--line-height-headings, 1.5)',
  13. fontStretch: 'var(--font-stretch-headings, normal)',
  14. textTransform: 'lowercase',
  15. whiteSpace: 'nowrap',
  16. })
  17. const Org = styled('small')({
  18. position: 'absolute',
  19. top: '-0.25em',
  20. right: 0,
  21. fontWeight: 'bolder',
  22. })
  23. const Subtitle = styled('small')({
  24. position: 'absolute',
  25. bottom: '-1em',
  26. right: 0,
  27. fontWeight: 'bolder',
  28. })
  29. const Brand = () => {
  30. const org = pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null
  31. const name = pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name
  32. return (
  33. <Base>
  34. {org && (
  35. <Org>
  36. {org}
  37. </Org>
  38. )}
  39. <Title>
  40. {name}
  41. </Title>
  42. <Subtitle>
  43. v.{pkg.version}
  44. </Subtitle>
  45. </Base>
  46. )
  47. }
  48. export default Brand