customizable icon color

pages/collections/[id].tsx

@@ -104,17 +104,20 @@ export default function () {
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
           <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
-            <div className="flex gap-3 items-center">
-              <div className="flex gap-2">
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
-                />
-                <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
-                  {activeCollection?.name}
-                </p>
+            {activeCollection ? (
+              <div className="flex gap-3 items-center">
+                <div className="flex gap-2">
+                  <FontAwesomeIcon
+                    icon={faFolder}
+                    style={{ color: activeCollection?.color }}
+                    className="sm:w-8 sm:h-8 w-6 h-6 mt-2"
+                  />
+                  <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+                    {activeCollection?.name}
+                  </p>
+                </div>
               </div>
-            </div>
+            ) : null}
 
             {activeCollection ? (
               <div