1import { css } from '@emotion/react'; 2import { 3 breakpoints, 4 theme, 5 spacing, 6 typography, 7 ChevronRightIcon, 8 Logo as LogoIcon, 9 WordMarkLogo, 10} from '@expo/styleguide'; 11import React from 'react'; 12 13import { LinkBase } from '~/ui/components/Text'; 14 15export const Logo = () => ( 16 <> 17 <LinkBase css={linkStyle} href="https://expo.dev"> 18 <WordMarkLogo color={theme.text.default} css={[logoStyle, hideOnMobile]} title="Expo" /> 19 <LogoIcon color={theme.text.default} css={[logoStyle, showOnMobile]} title="Expo" /> 20 </LinkBase> 21 <ChevronRightIcon css={chevronStyle} color={theme.icon.secondary} title="" /> 22 <LinkBase css={linkStyle} href="/"> 23 <span css={subtitleStyle}>Docs</span> 24 </LinkBase> 25 </> 26); 27 28const linkStyle = css` 29 display: flex; 30 flex-direction: row; 31 align-items: center; 32 text-decoration: none; 33 user-select: none; 34`; 35 36const logoStyle = css` 37 height: 20px; 38 margin-top: 1px; 39`; 40 41const chevronStyle = css` 42 margin: 0 ${spacing[2]}px; 43 44 @media screen and (max-width: ${breakpoints.medium}px) { 45 margin-left: ${spacing[0.5]}px; 46 } 47`; 48 49const hideOnMobile = css` 50 @media screen and (max-width: ${breakpoints.medium}px) { 51 display: none; 52 } 53`; 54 55const showOnMobile = css` 56 display: none; 57 58 @media screen and (max-width: ${breakpoints.medium}px) { 59 display: block; 60 margin-top: 0; 61 margin-right: ${spacing[1.5]}px; 62 } 63`; 64 65const subtitleStyle = css` 66 color: ${theme.text.default}; 67 ${typography.fontSizes[18]} 68`; 69