- implement colors section

src/components/builder/right/RightSidebar.js

@@ -3,6 +3,7 @@ import { Element } from 'react-scroll';
 import sections from '../../../data/rightSections';
 import RightNavbar from './RightNavbar';
 import styles from './RightSidebar.module.css';
+import Colors from './sections/Colors';
 import Layout from './sections/Layout';
 import Templates from './sections/Templates';
 
@@ -12,6 +13,8 @@ const getComponent = (id) => {
       return Templates;
     case 'layout':
       return Layout;
+    case 'colors':
+      return Colors;
     default:
       throw new Error();
   }

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

@@ -1,7 +1,11 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { memo } from 'react';
 import { useDispatch } from '../../../../contexts/ResumeContext';
+import colors from '../../../../data/colors';
+import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
+import styles from './Colors.module.css';
 
 const Colors = () => {
   const dispatch = useDispatch();
@@ -20,7 +24,22 @@ const Colors = () => {
     <section>
       <Heading>Colors</Heading>
 
+      <div className="mb-6 grid grid-cols-8 col-gap-2 row-gap-6">
+        {colors.map((color) => (
+          <div
+            key={color}
+            tabIndex="0"
+            role="button"
+            className={styles.circle}
+            style={{ backgroundColor: color }}
+            onKeyUp={(e) => handleKeyUp(e, () => handleClick(color))}
+            onClick={() => handleClick(color)}
+          />
+        ))}
+      </div>
+
       <Input
+        type="color"
         name="primary"
         label="Primary Color"
         placeholder="#FF4081"
@@ -28,6 +47,7 @@ const Colors = () => {
       />
 
       <Input
+        type="color"
         name="text"
         label="Text Color"
         placeholder="#444444"
@@ -35,6 +55,7 @@ const Colors = () => {
       />
 
       <Input
+        type="color"
         name="background"
         label="Background Color"
         placeholder="#FFFFFF"

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

@@ -0,0 +1,11 @@
+.circle {
+  @apply cursor-pointer rounded-full h-6 w-6;
+}
+
+.circle:focus {
+  @apply outline-none;
+}
+
+.circle:hover {
+  @apply opacity-75;
+}