- implement fonts section

gatsby-config.js

@@ -19,10 +19,38 @@ module.exports = {
       resolve: 'gatsby-plugin-prefetch-google-fonts',
       options: {
         fonts: [
+          {
+            family: 'Lato',
+            variants: ['400', '700'],
+          },
           {
             family: 'Montserrat',
             variants: ['400', '500', '600', '700'],
           },
+          {
+            family: 'Nunito',
+            variants: ['400', '600', '700'],
+          },
+          {
+            family: 'Open Sans',
+            variants: ['400', '600', '700'],
+          },
+          {
+            family: 'Raleway',
+            variants: ['400', '500', '700'],
+          },
+          {
+            family: 'Rubik',
+            variants: ['400', '500', '700'],
+          },
+          {
+            family: 'Source Sans Pro',
+            variants: ['400', '600', '700'],
+          },
+          {
+            family: 'Titillium Web',
+            variants: ['400', '600', '700'],
+          },
         ],
       },
     },

src/components/builder/right/RightSidebar.js

@@ -4,6 +4,7 @@ import sections from '../../../data/rightSections';
 import RightNavbar from './RightNavbar';
 import styles from './RightSidebar.module.css';
 import Colors from './sections/Colors';
+import Fonts from './sections/Fonts';
 import Layout from './sections/Layout';
 import Templates from './sections/Templates';
 
@@ -15,6 +16,8 @@ const getComponent = (id) => {
       return Layout;
     case 'colors':
       return Colors;
+    case 'fonts':
+      return Fonts;
     default:
       throw new Error();
   }

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

@@ -0,0 +1,46 @@
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
+import { handleKeyUp } from '../../../../utils';
+import Heading from '../../../shared/Heading';
+import fonts from '../../../../data/fonts';
+import styles from './Fonts.module.css';
+
+const Fonts = () => {
+  const dispatch = useDispatch();
+  const font = useSelector('metadata.font');
+
+  const handleClick = (value) => {
+    dispatch({
+      type: 'on_input',
+      payload: {
+        path: 'metadata.font',
+        value,
+      },
+    });
+  };
+
+  return (
+    <section>
+      <Heading>Fonts</Heading>
+
+      <div className="grid grid-cols-2 gap-8">
+        {fonts.map((x) => (
+          <div
+            key={x}
+            tabIndex="0"
+            role="button"
+            style={{ fontFamily: x }}
+            className={cx(styles.font, { [styles.selected]: font === x })}
+            onKeyUp={(e) => handleKeyUp(e, () => handleClick(x))}
+            onClick={() => handleClick(x)}
+          >
+            {x}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default memo(Fonts);

src/components/builder/right/sections/Fonts.module.css

@@ -0,0 +1,19 @@
+.font {
+  @apply px-6 py-6 text-xl font-medium truncate text-center bg-secondary rounded shadow;
+  @apply transition-colors duration-200 ease-in-out;
+}
+
+.font:focus {
+  @apply outline-none bg-secondary-light;
+  @apply transition-colors duration-200 ease-in-out;
+}
+
+.font:hover {
+  @apply bg-secondary-light;
+  @apply transition-colors duration-200 ease-in-out;
+}
+
+.font.selected {
+  @apply outline-none bg-secondary-light;
+  @apply transition-colors duration-200 ease-in-out;
+}

src/data/fonts.js

@@ -0,0 +1,12 @@
+const fonts = [
+  'Lato',
+  'Montserrat',
+  'Nunito',
+  'Open Sans',
+  'Raleway',
+  'Rubik',
+  'Source Sans Pro',
+  'Titillium Web',
+];
+
+export default fonts;

src/data/rightSections.js

@@ -1,4 +1,9 @@
-import { MdColorLens, MdDashboard, MdStyle } from 'react-icons/md';
+import {
+  MdColorLens,
+  MdDashboard,
+  MdStyle,
+  MdFontDownload,
+} from 'react-icons/md';
 
 export default [
   {
@@ -16,4 +21,9 @@ export default [
     name: 'Colors',
     icon: MdColorLens,
   },
+  {
+    id: 'fonts',
+    name: 'Fonts',
+    icon: MdFontDownload,
+  },
 ];

src/templates/Onyx.js

@@ -4,12 +4,13 @@ import { MdEmail } from 'react-icons/md';
 
 const Onyx = ({ data }) => {
   const { profile, metadata } = data;
-  const { colors, layout } = metadata;
+  const { font, colors, layout } = metadata;
 
   return (
     <div
       className="p-8 grid grid-cols-10 gap-4 items-center"
       style={{
+        fontFamily: font,
         color: colors.text,
         backgroundColor: colors.background,
       }}