improvement(avatar): add marginTop and marginBottom params

Author: eshlox

packages/gatsby-theme-axii/src/components/Avatar/component.tsx

@@ -1,7 +1,7 @@
 import { graphql, useStaticQuery } from "gatsby";
 import Img from "gatsby-image";
 import React from "react";
-import { AvatarData } from "./interfaces";
+import { AvatarData, AvatarStyle } from "./interfaces";
 import useStyles from "./styles";
 
 const query = graphql`
@@ -16,15 +16,19 @@ const query = graphql`
   }
 `;
 
-const Avatar: React.FC = props => {
-  const classes = useStyles();
+const Avatar: React.FC<AvatarStyle> = ({
+  marginBottom = 0,
+  marginTop = 0,
+  ...rest
+}) => {
+  const classes = useStyles({ marginBottom, marginTop });
   const data: AvatarData = useStaticQuery(query);
 
   return (
     <Img
       fluid={data.file.childImageSharp.fluid}
       className={classes.avatar}
-      {...props}
+      {...rest}
     />
   );
 };

packages/gatsby-theme-axii/src/components/Avatar/interfaces.ts

@@ -5,3 +5,8 @@ export interface AvatarData {
     };
   };
 }
+
+export interface AvatarStyle {
+  marginBottom: number;
+  marginTop: number;
+}

packages/gatsby-theme-axii/src/components/Avatar/styles.ts

@@ -1,16 +1,19 @@
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { AvatarStyle } from "./interfaces";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    avatar: {
+    avatar: (props: AvatarStyle) => ({
+      marginBottom: theme.spacing(props.marginBottom),
+      marginTop: theme.spacing(props.marginTop),
       width: "200px",
       [theme.breakpoints.up("md")]: {
         width: "300px"
       },
       [theme.breakpoints.up("lg")]: {
         width: "400px"
       }
-    }
+    })
   })
 );
 

packages/site/content/pages/index.mdx

@@ -7,15 +7,15 @@ import Typography from "@material-ui/core/Typography";
 <Seo />
 <Grid container direction="column" justify="center" alignItems="center">
   <Grid item xs={12}>
-    <Typography variant="h1" component="h1" align="center" gutterBottom>
+    <Typography variant="h1" component="h1" align="center">
       AXII
     </Typography>
   </Grid>
   <Grid item xs={12}>
-    <Avatar />
+    <Avatar marginBottom={6} marginTop={6} />
   </Grid>
   <Grid item xs={12}>
-    <Typography variant="h2" component="h2" align="center" gutterBottom>
+    <Typography variant="h2" component="h2" align="center">
       A Gatsby blog theme.
     </Typography>
   </Grid>