- implement colors section

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