mirror of https://github.com/kremalicious/blog.git
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { graphql, useStaticQuery } from 'gatsby'
|
|
import { getSrc } from 'gatsby-plugin-image'
|
|
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
|
|
import IconLinks from './Networks'
|
|
import * as styles from './Vcard.module.css'
|
|
|
|
const query = graphql`
|
|
query Avatar {
|
|
avatar: allFile(filter: { name: { eq: "avatar" } }) {
|
|
edges {
|
|
node {
|
|
childImageSharp {
|
|
gatsbyImageData(
|
|
layout: CONSTRAINED
|
|
width: 80
|
|
height: 80
|
|
quality: 85
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function Vcard(): ReactElement {
|
|
const data = useStaticQuery<Queries.AvatarQuery>(query)
|
|
const { author, rss, jsonfeed } = useSiteMetadata()
|
|
const { mastodon, twitter, github, name, uri } = author
|
|
const avatar = getSrc(data.avatar.edges[0].node)
|
|
const links = [mastodon, github, twitter, rss, jsonfeed]
|
|
|
|
return (
|
|
<>
|
|
<img
|
|
className={styles.avatar}
|
|
src={avatar}
|
|
width="80"
|
|
height="80"
|
|
alt="avatar"
|
|
/>
|
|
<p className={styles.description}>
|
|
Blog of designer & developer{' '}
|
|
<a className="fn" rel="author" href={uri}>
|
|
{name}
|
|
</a>
|
|
</p>
|
|
|
|
<IconLinks links={links} />
|
|
</>
|
|
)
|
|
}
|