import * as React from 'react' import styled from 'styled-components' import pkg from '../../package.json' const Base = styled('div')({ position: 'relative', }) // @ts-ignore const Title = styled('strong')({ fontSize: '2rem', fontFamily: 'var(--font-family-headings), sans-serif', fontWeight: 'var(--font-weight-headings, 400)', lineHeight: 'var(--line-height-headings, 1.5)', fontStretch: 'var(--font-stretch-headings, normal)', textTransform: 'lowercase', whiteSpace: 'nowrap', }) const Org = styled('small')({ position: 'absolute', top: '-0.25em', right: 0, fontWeight: 'bolder', }) const Subtitle = styled('small')({ position: 'absolute', bottom: '-1em', right: 0, fontWeight: 'bolder', }) const Brand = () => { const org = pkg.name.includes('@') ? pkg.name.split('/')[0].slice(1) : null const name = pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name return ( {org && ( {org} )} {name} v.{pkg.version} ) } export default Brand