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.1 KiB

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