♻️ field type and field recipient to own component

apps/web/components/editor/recipient-selector.tsx

@@ -0,0 +1,101 @@
+import { Fragment, useEffect, useState } from "react";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import { classNames } from "@documenso/lib";
+const stc = require("string-to-color");
+
+export default function RecipientSelector(props: any) {
+  const [selectedRecipient, setSelectedRecipient]: any = useState(
+    props?.recipients[0]
+  );
+
+  useEffect(() => {
+    props.onChange(selectedRecipient);
+  }, [selectedRecipient]);
+
+  return (
+    <Listbox
+      value={selectedRecipient}
+      onChange={(e: any) => {
+        setSelectedRecipient(e);
+      }}
+    >
+      {({ open }) => (
+        <div className="relative mt-1 mb-2">
+          <Listbox.Button className="select-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
+            <span className="flex items-center">
+              <span
+                className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
+                style={{ background: stc(selectedRecipient?.email) }}
+              />
+              <span className="ml-3 block truncate">
+                {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
+              </span>
+            </span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </span>
+          </Listbox.Button>
+
+          <Transition
+            show={open}
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {props?.recipients.map((recipient: any) => (
+                <Listbox.Option
+                  key={recipient?.id}
+                  className={({ active }) =>
+                    classNames(
+                      active ? "text-white bg-neon-dark" : "text-gray-900",
+                      "relative cursor-default select-none py-2 pl-3 pr-9"
+                    )
+                  }
+                  value={recipient}
+                >
+                  {({ selected, active }) => (
+                    <>
+                      <div className="flex items-center">
+                        <span
+                          className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
+                          style={{
+                            background: stc(recipient?.email),
+                          }}
+                        />
+                        <span
+                          className={classNames(
+                            selected ? "font-semibold" : "font-normal",
+                            "ml-3 block truncate"
+                          )}
+                        >
+                          {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
+                        </span>
+                      </div>
+
+                      {selected ? (
+                        <span
+                          className={classNames(
+                            active ? "text-white" : "text-neon-dark",
+                            "absolute inset-y-0 right-0 flex items-center pr-4"
+                          )}
+                        >
+                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      )}
+    </Listbox>
+  );
+}