1 import React from 'react'
2 import {Box} from '@primer/react'
3 import Link from './link'
4 import useSiteMetadata from '../hooks/use-site-metadata'
5
6 const NpmLogo = ({size, sx}) => (
7 <Box sx={{...sx, color: 'logoBg'}}>
8 <svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
9 <polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
10 <polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
11 </svg>
12 </Box>
13 )
14
15 const SiteTitle = ({logo, sx}) => {
16 const siteMetadata = useSiteMetadata()
17
18 return (
19 <Link
20 to="/"
21 sx={{
22 fontWeight: 'bold',
23 fontSize: 2,
24 color: 'fg.default',
25 display: 'flex',
26 alignItems: 'center',
27 ...sx,
28 }}
29 >
30 {logo ? <NpmLogo size="32" sx={{display: 'flex', mr: 3}} /> : null}
31 {siteMetadata.title}
32 </Link>
33 )
34 }
35
36 export default SiteTitle