Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

brand.tsx 1.2 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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: 500,
  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.375em',
  20. right: 0,
  21. fontWeight: 600,
  22. textTransform: 'lowercase',
  23. })
  24. const Subtitle = styled('small')({
  25. position: 'absolute',
  26. bottom: '-1em',
  27. right: 0,
  28. fontWeight: 600,
  29. })
  30. const Brand = () => {
  31. const org = pkg['org'] || (pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null)
  32. const name = pkg['title'] || (pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name)
  33. return (
  34. <Base>
  35. {org && (
  36. <React.Fragment>
  37. <Org>
  38. {org}
  39. </Org>
  40. {' '}
  41. </React.Fragment>
  42. )}
  43. <Title>
  44. {name}
  45. </Title>
  46. {' '}
  47. <Subtitle>
  48. v.{pkg.version}
  49. </Subtitle>
  50. </Base>
  51. )
  52. }
  53. export default Brand