progressed icon picker component

components/IconPicker.tsx

@@ -1,31 +1,26 @@
 import { icons } from "@/lib/client/icons";
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, lazy, Suspense } from "react";
 import Fuse from "fuse.js";
 import TextInput from "./TextInput";
 import Popover from "./Popover";
 import { HexColorPicker } from "react-colorful";
+import { useTranslation } from "next-i18next";
 import Icon from "./Icon";
-
+import { IconWeight } from "@phosphor-icons/react";
-const fuse = new Fuse(icons, {
-  keys: [{ name: "name", weight: 4 }, "tags", "categories"],
-  threshold: 0.2,
-  useExtendedSearch: true,
-});
 
 type Props = {
-  onClose: Function;
+  alignment?: "left" | "right";
-  alignment?: "left" | "right" | "bottom" | "top";
   color: string;
   setColor: Function;
-  iconName: string;
+  iconName?: string;
   setIconName: Function;
-  weight: "light" | "regular" | "bold" | "fill" | "duotone";
+  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
   setWeight: Function;
+  reset: Function;
   className?: string;
 };
 
 const IconPicker = ({
-  onClose,
   alignment,
   color,
   setColor,
@@ -34,8 +29,17 @@ const IconPicker = ({
   weight,
   setWeight,
   className,
+  reset,
 }: Props) => {
+  const fuse = new Fuse(icons, {
+    keys: [{ name: "name", weight: 4 }, "tags", "categories"],
+    threshold: 0.2,
+    useExtendedSearch: true,
+  });
+
+  const { t } = useTranslation();
   const [query, setQuery] = useState("");
+  const [iconPicker, setIconPicker] = useState(false);
 
   const filteredQueryResultsSelector = useMemo(() => {
     if (!query) {
@@ -45,26 +49,43 @@ const IconPicker = ({
   }, [query]);
 
   return (
-    <Popover
+    <div className="relative">
-      onClose={onClose}
+      <div
-      className={
+        onClick={() => setIconPicker(!iconPicker)}
-        className +
+        className="btn btn-square w-20 h-20"
-        " bg-base-200 border border-neutral-content p-3 h-72 w-72 overflow-y-auto rounded-lg"
-      }
       >
-      <div>
+        {iconName ? (
-        <div className="mb-3 flex gap-3">
-          <div className="w-full flex flex-col justify-between">
           <Icon
             icon={iconName}
-              size={80}
+            size={60}
-              weight={weight as any}
+            weight={(weight || "regular") as IconWeight}
-              color={color}
+            color={color || "#0ea5e9"}
-              className="mx-auto"
           />
-
+        ) : (
+          <i
+            className="bi-folder-fill text-6xl"
+            style={{ color: color || "#0ea5e9" }}
+          ></i>
+        )}
+      </div>
+      {iconPicker && (
+        <Popover
+          onClose={() => setIconPicker(false)}
+          className={
+            className +
+            " fade-in bg-base-200 border border-neutral-content p-2 h-44 w-[22.5rem] rounded-lg backdrop-blur-sm bg-opacity-90 top-20 left-0 lg:-translate-x-1/3"
+          }
+        >
+          <div className="flex gap-2 h-full w-full">
+            <div className="flex flex-col gap-2 h-full w-fit color-picker">
+              <div
+                className="btn btn-ghost btn-xs"
+                onClick={reset as React.MouseEventHandler<HTMLDivElement>}
+              >
+                {t("reset")}
+              </div>
               <select
-              className="border border-neutral-content bg-base-100 focus:outline-none focus:border-primary duration-100 w-full rounded-[0.375rem] h-7"
+                className="border border-neutral-content bg-base-100 focus:outline-none focus:border-primary duration-100 w-full rounded-md h-7"
                 value={weight}
                 onChange={(e) => setWeight(e.target.value)}
               >
@@ -75,25 +96,25 @@ const IconPicker = ({
                 <option value="fill">Fill</option>
                 <option value="duotone">Duotone</option>
               </select>
-          </div>
               <HexColorPicker color={color} onChange={(e) => setColor(e)} />
             </div>
 
+            <div className="flex flex-col gap-2 w-fit">
               <TextInput
-          className="p-2 rounded w-full mb-3 h-7 text-sm"
+                className="p-2 rounded w-full h-7 text-sm"
                 placeholder="Search icons"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
               />
 
-        <div className="grid grid-cols-5 gap-1 w-full">
+              <div className="grid grid-cols-4 gap-1 w-full overflow-y-auto h-32 border border-neutral-content bg-base-100 rounded-md p-2">
                 {filteredQueryResultsSelector.map((icon) => {
                   const IconComponent = icon.Icon;
                   return (
                     <div
                       key={icon.pascal_name}
                       onClick={() => setIconName(icon.pascal_name)}
-                className={`cursor-pointer btn p-1 box-border ${
+                      className={`cursor-pointer btn p-1 box-border bg-base-100 border-none aspect-square ${
                         icon.pascal_name === iconName
                           ? "outline outline-1 outline-primary"
                           : ""
@@ -105,7 +126,10 @@ const IconPicker = ({
                 })}
               </div>
             </div>
+          </div>
         </Popover>
+      )}
+    </div>
   );
 };
 

components/ModalContent/EditCollectionModal.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
-import { HexColorPicker } from "react-colorful";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
@@ -8,6 +7,7 @@ import { useUpdateCollection } from "@/hooks/store/collections";
 import toast from "react-hot-toast";
 import IconPicker from "../IconPicker";
 import Icon from "../Icon";
+import { IconWeight } from "@phosphor-icons/react";
 
 type Props = {
   onClose: Function;
@@ -22,7 +22,6 @@ export default function EditCollectionModal({
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
-  const [iconPicker, setIconPicker] = useState(false);
   const [submitLoader, setSubmitLoader] = useState(false);
   const updateCollection = useUpdateCollection();
 
@@ -59,10 +58,32 @@ export default function EditCollectionModal({
       <div className="divider mb-3 mt-1"></div>
 
       <div className="flex flex-col gap-3">
-        <div className="flex flex-col sm:flex-row gap-3">
+        <div className="flex flex-col gap-3">
+          <div className="flex gap-3 items-end">
+            <IconPicker
+              color={collection.color || "#0ea5e9"}
+              setColor={(color: string) =>
+                setCollection({ ...collection, color })
+              }
+              weight={(collection.iconWeight || "regular") as IconWeight}
+              setWeight={(iconWeight: string) =>
+                setCollection({ ...collection, iconWeight })
+              }
+              iconName={collection.icon as string}
+              setIconName={(icon: string) =>
+                setCollection({ ...collection, icon })
+              }
+              reset={() =>
+                setCollection({
+                  ...collection,
+                  color: "#0ea5e9",
+                  icon: "",
+                  iconWeight: "",
+                })
+              }
+            />
             <div className="w-full">
               <p className="mb-2">{t("name")}</p>
-            <div className="flex flex-col gap-3">
               <TextInput
                 className="bg-base-200"
                 value={collection.name}
@@ -71,46 +92,6 @@ export default function EditCollectionModal({
                   setCollection({ ...collection, name: e.target.value })
                 }
               />
-              <div>
-                <p className="w-full mb-2">{t("color")}</p>
-                <div className="color-picker flex justify-between items-center">
-                  <div className="flex flex-col gap-2 items-center w-32 relative">
-                    <Icon
-                      icon={collection.icon as string}
-                      size={80}
-                      weight={collection.iconWeight as any}
-                      color={collection.color as string}
-                      onClick={() => setIconPicker(true)}
-                    />
-                    {iconPicker && (
-                      <IconPicker
-                        onClose={() => setIconPicker(false)}
-                        className="top-20"
-                        color={collection.color as string}
-                        setColor={(color: string) =>
-                          setCollection({ ...collection, color })
-                        }
-                        weight={collection.iconWeight as any}
-                        setWeight={(iconWeight: string) =>
-                          setCollection({ ...collection, iconWeight })
-                        }
-                        iconName={collection.icon as string}
-                        setIconName={(icon: string) =>
-                          setCollection({ ...collection, icon })
-                        }
-                      />
-                    )}
-                    <div
-                      className="btn btn-ghost btn-xs"
-                      onClick={() =>
-                        setCollection({ ...collection, color: "#0ea5e9" })
-                      }
-                    >
-                      {t("reset")}
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
 

pages/_app.tsx

@@ -88,13 +88,10 @@ function App({
                     {icon}
                     <span data-testid="toast-message">{message}</span>
                     {t.type !== "loading" && (
-                      <button
+                      <div
-                        className="btn btn-xs outline-none btn-circle btn-ghost"
                         data-testid="close-toast-button"
                         onClick={() => toast.dismiss(t.id)}
-                      >
+                      ></div>
-                        <i className="bi bi-x"></i>
-                      </button>
                     )}
                   </div>
                 )}

styles/globals.css

@@ -144,15 +144,16 @@
 
 /* For react-colorful */
 .color-picker .react-colorful {
-  width: 100%;
+  height: 7rem;
-  height: 7.5rem;
+  width: 7rem;
 }
 .color-picker .react-colorful__hue {
   height: 1rem;
 }
 .color-picker .react-colorful__pointer {
-  width: 1.3rem;
+  width: 1rem;
-  height: 1.3rem;
+  height: 1rem;
+  border-width: 1px;
 }
 
 /* For the Link banner */