- implement fonts section

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;
+}