1 import React from 'react'
2 import Link from './link'
3 import useSiteMetadata from '../hooks/use-site-metadata'
4
5 import * as styles from './site-title.module.css'
6 import {clsx} from 'clsx'
7
8 const NpmLogo = ({size, className}) => (
9 <div className={clsx(styles.Box, className)}>
10 <svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
11 <polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
12 <polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
13 </svg>
14 </div>
15 )
16
17 const SiteTitle = ({logo, className}) => {
18 const siteMetadata = useSiteMetadata()
19
20 return (
21 <Link to="/" className={clsx(styles.Link, className)}>
22 {logo ? <NpmLogo size="32" className={styles.NpmLogo} /> : null}
23 {siteMetadata.title}
24 </Link>
25 )
26 }
27
28 export default SiteTitle