customizable icon color

components/Modal/Collection/CollectionInfo.tsx

@@ -1,10 +1,15 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPenToSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
+import {
+  faFolder,
+  faPenToSquare,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembers } from "@/types/global";
 import RequiredBadge from "../../RequiredBadge";
 import SubmitButton from "@/components/SubmitButton";
+import { HexColorPicker } from "react-colorful";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -46,21 +51,48 @@ export default function CollectionInfo({
             Name
             <RequiredBadge />
           </p>
-          <input
-            value={collection.name}
-            onChange={(e) =>
-              setCollection({ ...collection, name: e.target.value })
-            }
-            type="text"
-            placeholder="e.g. Example Collection"
-            className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-          />
+          <div className="flex flex-col gap-3">
+            <input
+              value={collection.name}
+              onChange={(e) =>
+                setCollection({ ...collection, name: e.target.value })
+              }
+              type="text"
+              placeholder="e.g. Example Collection"
+              className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+            />
+            <div className="color-picker flex justify-between">
+              <div className="flex flex-col justify-between items-center w-32">
+                <p className="text-sm w-full font-bold text-sky-300 mb-2">
+                  Icon Color
+                </p>
+                <div style={{ color: collection.color || "#7dd3fc" }}>
+                  <FontAwesomeIcon
+                    icon={faFolder}
+                    className="w-12 h-12 drop-shadow"
+                  />
+                </div>
+                <div
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-gray-500 hover:bg-slate-200 duration-100"
+                  onClick={() =>
+                    setCollection({ ...collection, color: "#7dd3fc" })
+                  }
+                >
+                  Reset
+                </div>
+              </div>
+              <HexColorPicker
+                color={collection.color || "#7dd3fc"}
+                onChange={(e) => setCollection({ ...collection, color: e })}
+              />
+            </div>
+          </div>
         </div>
 
         <div className="w-full">
           <p className="text-sm font-bold text-sky-300 mb-2">Description</p>
           <textarea
-            className="w-full h-40 resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
+            className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-500"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>