feat: add avatar component

src/components/Avatar/index.tsx

@@ -0,0 +1,11 @@
+import { ImageProps } from 'next/image'
+
+import { Wrapper } from './styles'
+
+type AvatarProps = ImageProps & {
+  src?: string
+}
+
+export function Avatar({ src, ...rest }: AvatarProps) {
+  return !!src ? <Wrapper src={src} width={84} height={84} quality={100} {...rest} /> : null
+}

src/components/Avatar/styles.ts

@@ -0,0 +1,10 @@
+import Image from 'next/image'
+
+import { styled } from '../../styles/stitches.config'
+
+export const Wrapper = styled(Image, {
+  borderRadius: '9999px',
+  objectFit: 'cover',
+  width: '84px',
+  height: '84px'
+})

src/pages/index.tsx

@@ -1,3 +1,4 @@
+import { Avatar } from '../components/Avatar'
 import { Button } from '../components/Button'
 
 export default function Home() {
@@ -17,14 +18,20 @@ export default function Home() {
   ]
 
   return (
-    <div>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100vh',
+        gap: '1rem'
+      }}
+    >
+      <Avatar src="/avatar.jpeg" />
       {links.map(link => (
-        <>
-          <Button color="sky" schema="rounded" outline key={link.href}>
-            {link.label}
-          </Button>
-          <br />
-        </>
+        <Button color="sky" schema="rounded" outline key={link.href}>
+          {link.label}
+        </Button>
       ))}
     </div>
   )