- implement celebi template

src/components/builder/center/Artboard.js

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSelector } from '../../../contexts/ResumeContext';
 import Castform from '../../../templates/Castform';
+import Celebi from '../../../templates/Celebi';
 import Gengar from '../../../templates/Gengar';
 import Glalie from '../../../templates/Glalie';
 import Onyx from '../../../templates/Onyx';
@@ -26,6 +27,7 @@ const Artboard = () => {
         {template === 'gengar' && <Gengar data={state} />}
         {template === 'castform' && <Castform data={state} />}
         {template === 'glalie' && <Glalie data={state} />}
+        {template === 'celebi' && <Celebi data={state} />}
       </div>
     </div>
   );

src/components/builder/right/sections/Templates.js

@@ -1,4 +1,6 @@
 import cx from 'classnames';
+import { graphql, useStaticQuery } from 'gatsby';
+import GatsbyImage from 'gatsby-image';
 import React, { memo } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
 import templateOptions from '../../../../data/templateOptions';
@@ -10,6 +12,53 @@ const Templates = () => {
   const dispatch = useDispatch();
   const template = useSelector('metadata.template');
 
+  const previews = useStaticQuery(graphql`
+    query {
+      onyx: file(relativePath: { eq: "templates/onyx.png" }) {
+        childImageSharp {
+          fluid(maxHeight: 400) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+      pikachu: file(relativePath: { eq: "templates/pikachu.png" }) {
+        childImageSharp {
+          fluid(maxHeight: 400) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+      gengar: file(relativePath: { eq: "templates/gengar.png" }) {
+        childImageSharp {
+          fluid(maxHeight: 400) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+      castform: file(relativePath: { eq: "templates/castform.png" }) {
+        childImageSharp {
+          fluid(maxHeight: 400) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+      glalie: file(relativePath: { eq: "templates/glalie.png" }) {
+        childImageSharp {
+          fluid(maxHeight: 400) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+      celebi: file(relativePath: { eq: "templates/celebi.png" }) {
+        childImageSharp {
+          fluid(maxHeight: 400) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `);
+
   const handleClick = (value) => {
     dispatch({
       type: 'on_input',
@@ -36,7 +85,13 @@ const Templates = () => {
               [styles.selected]: template === x.id,
             })}
           >
-            <img loading="lazy" height="240px" src={x.preview} alt={x.name} />
+            <GatsbyImage
+              alt={x.name}
+              loading="eager"
+              className="w-full"
+              style={{ height: '225px' }}
+              fluid={previews[x.id].childImageSharp.fluid}
+            />
             <span>{x.name}</span>
           </div>
         ))}