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";
-
-const fuse = new Fuse(icons, {
-  keys: [{ name: "name", weight: 4 }, "tags", "categories"],
-  threshold: 0.2,
-  useExtendedSearch: true,
-});
+import { IconWeight } from "@phosphor-icons/react";
 
 type Props = {
-  onClose: Function;
-  alignment?: "left" | "right" | "bottom" | "top";
+  alignment?: "left" | "right";
   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
-      onClose={onClose}
-      className={
-        className +
-        " bg-base-200 border border-neutral-content p-3 h-72 w-72 overflow-y-auto rounded-lg"
-      }
-    >
-      <div>
-        <div className="mb-3 flex gap-3">
-          <div className="w-full flex flex-col justify-between">
-            <Icon
-              icon={iconName}
-              size={80}
-              weight={weight as any}
-              color={color}
-              className="mx-auto"
-            />
-
-            <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 className="relative">
+      <div
+        onClick={() => setIconPicker(!iconPicker)}
+        className="btn btn-square w-20 h-20"
+      >
+        {iconName ? (
+          <Icon
+            icon={iconName}
+            size={60}
+            weight={(weight || "regular") as IconWeight}
+            color={color || "#0ea5e9"}
+          />
+        ) : (
+          <i
+            className="bi-folder-fill text-6xl"
+            style={{ color: color || "#0ea5e9" }}
+          ></i>
+        )}
       </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>
   );
 };