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

src/components/shared/Input.js

@@ -127,6 +127,22 @@ const Input = ({
           </div>
         )}
 
+        {type === 'color' && (
+          <div className="relative grid items-center">
+            <div className={styles.circle} style={{ backgroundColor: value }} />
+
+            <input
+              id={uuid}
+              name={name}
+              type="text"
+              value={value}
+              onBlur={onBlur}
+              onChange={onChange}
+              placeholder={placeholder}
+            />
+          </div>
+        )}
+
         {error && touched && <p>{error}</p>}
       </label>
     </div>

src/components/shared/Input.module.css

@@ -29,3 +29,12 @@
 .container label > p {
   @apply mt-1 text-red-600 text-xs;
 }
+
+.circle {
+  left: 14px;
+  @apply absolute bg-white rounded-full w-6 h-6;
+}
+
+div.circle + input {
+  padding-left: 44px;
+}

src/data/colors.js

@@ -0,0 +1,20 @@
+const colors = [
+  '#f44336',
+  '#E91E63',
+  '#9C27B0',
+  '#673AB7',
+  '#3F51B5',
+  '#2196F3',
+  '#03A9F4',
+  '#00BCD4',
+  '#009688',
+  '#4CAF50',
+  '#8BC34A',
+  '#CDDC39',
+  '#FFEB3B',
+  '#FFC107',
+  '#FF9800',
+  '#FF5722',
+];
+
+export default colors;

src/data/rightSections.js

@@ -1,4 +1,4 @@
-import { MdDashboard, MdStyle } from 'react-icons/md';
+import { MdColorLens, MdDashboard, MdStyle } from 'react-icons/md';
 
 export default [
   {
@@ -11,4 +11,9 @@ export default [
     name: 'Layout',
     icon: MdDashboard,
   },
+  {
+    id: 'colors',
+    name: 'Colors',
+    icon: MdColorLens,
+  },
 ];