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,67 +49,87 @@ 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"
+      >
-      }
+        {iconName ? (
-    >
+          <Icon
-      <div>
+            icon={iconName}
-        <div className="mb-3 flex gap-3">
+            size={60}
-          <div className="w-full flex flex-col justify-between">
+            weight={(weight || "regular") as IconWeight}
-            <Icon
+            color={color || "#0ea5e9"}
-              icon={iconName}
+          />
-              size={80}
+        ) : (
-              weight={weight as any}
+          <i
-              color={color}
+            className="bi-folder-fill text-6xl"
-              className="mx-auto"
+            style={{ color: color || "#0ea5e9" }}
-            />
+          ></i>
-
+        )}
-            <select
-              className="border border-neutral-content bg-base-100 focus:outline-none focus:border-primary duration-100 w-full rounded-[0.375rem] h-7"
-              value={weight}
-              onChange={(e) => setWeight(e.target.value)}
-            >
-              <option value="regular">Regular</option>
-              <option value="thin">Thin</option>
-              <option value="light">Light</option>
-              <option value="bold">Bold</option>
-              <option value="fill">Fill</option>
-              <option value="duotone">Duotone</option>
-            </select>
-          </div>
-          <HexColorPicker color={color} onChange={(e) => setColor(e)} />
-        </div>
-
-        <TextInput
-          className="p-2 rounded w-full mb-3 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">
-          {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 ${
-                  icon.pascal_name === iconName
-                    ? "outline outline-1 outline-primary"
-                    : ""
-                }`}
-              >
-                <IconComponent size={32} weight={weight} color={color} />
-              </div>
-            );
-          })}
-        </div>
       </div>
-    </Popover>
+      {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-md h-7"
+                value={weight}
+                onChange={(e) => setWeight(e.target.value)}
+              >
+                <option value="regular">Regular</option>
+                <option value="thin">Thin</option>
+                <option value="light">Light</option>
+                <option value="bold">Bold</option>
+                <option value="fill">Fill</option>
+                <option value="duotone">Duotone</option>
+              </select>
+              <HexColorPicker color={color} onChange={(e) => setColor(e)} />
+            </div>
+
+            <div className="flex flex-col gap-2 w-fit">
+              <TextInput
+                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-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 bg-base-100 border-none aspect-square ${
+                        icon.pascal_name === iconName
+                          ? "outline outline-1 outline-primary"
+                          : ""
+                      }`}
+                    >
+                      <IconComponent size={32} weight={weight} color={color} />
+                    </div>
+                  );
+                })}
+              </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="w-full">
+          <div className="flex gap-3 items-end">
-            <p className="mb-2">{t("name")}</p>
+            <IconPicker
-            <div className="flex flex-col gap-3">
+              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>
               <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 */