StyleInput: implement custom dropdown with example icons

src/components/StyleInput/StyleInput.tsx

@@ -5,22 +5,38 @@ import Select from "react-dropdown-select";
 import { styleQueryAtom } from "../../state/atoms";
 import { IconStyle } from "../../lib";
 import "./StyleInput.css";
-import { Heart } from "phosphor-react";
+import { PencilLine } from "phosphor-react";
 
 const options = [
-  { key: "Thin", value: IconStyle.THIN, icon: <Heart weight="thin" /> },
-  { key: "Light", value: IconStyle.LIGHT, icon: <Heart weight="light" /> },
+  {
+    key: "Thin",
+    value: IconStyle.THIN,
+    icon: <PencilLine size={24} weight="thin" />,
+  },
+  {
+    key: "Light",
+    value: IconStyle.LIGHT,
+    icon: <PencilLine size={24} weight="light" />,
+  },
   {
     key: "Regular",
     value: IconStyle.REGULAR,
-    icon: <Heart weight="regular" />,
+    icon: <PencilLine size={24} weight="regular" />,
+  },
+  {
+    key: "Bold",
+    value: IconStyle.BOLD,
+    icon: <PencilLine size={24} weight="bold" />,
+  },
+  {
+    key: "Fill",
+    value: IconStyle.FILL,
+    icon: <PencilLine size={24} weight="fill" />,
   },
-  { key: "Bold", value: IconStyle.BOLD, icon: <Heart weight="bold" /> },
-  { key: "Fill", value: IconStyle.FILL, icon: <Heart weight="fill" /> },
   {
     key: "Duotone",
     value: IconStyle.DUOTONE,
-    icon: <Heart weight="duotone" />,
+    icon: <PencilLine size={24} weight="duotone" />,
   },
 ];
 
@@ -36,21 +52,29 @@ const StyleInput: React.FC<StyleInputProps> = () => {
 
   return (
     <Select
-      style={{ height: 48 }}
       options={options}
       values={[options[2]]}
       searchable={false}
       labelField="key"
       onChange={(values) => setStyle(values[0].value as IconStyle)}
-      // itemRenderer={({ item, methods }) => (
-      //   <div
-      //     className="react-dropdown-select-item"
-      //     onClick={() => methods.addItem(item)}
-      //   >
-      //     {item.icon}
-      //     {item.key}
-      //   </div>
-      // )}
+      itemRenderer={({ item, itemIndex, state: { cursor, values }, methods }) => (
+        <span
+          role="option"
+          aria-selected={item.key === values[0].key}
+          className={`react-dropdown-select-item ${itemIndex === cursor ? "react-dropdown-select-item-active" : ""}`}
+          tabIndex={-1}
+          onClick={() => methods.addItem(item)}
+        >
+          {item.icon}
+          {item.key}
+        </span>
+      )}
+      contentRenderer={({ state: { values }, methods }) => (
+        <div className="react-dropdown-select-content" {...methods}>
+          {values[0].icon}
+          {values[0].key}
+        </div>
+      )}
     />
   );
 };