function CustomizationsSelector()

in packages/dashboard-app/src/pages/terminal/inline.tsx [22:98]
72 lines of code
4 McCabe index (conditional complexity)

function CustomizationsSelector() {
  const [customizations, setCustomizations] =
    useState<Codewhisperer.Customization[]>();

  const [selectedCustomizations, setSelectedCustomizations] = useLocalStateZod(
    CUSTOMIZATIONS_STATE_KEY,
    z
      .object({
        arn: z.string(),
        name: z.string().nullish(),
        description: z.string().nullish(),
      })
      .nullish(),
  );

  useEffect(() => {
    Codewhisperer.listCustomizations().then((c) => setCustomizations(c));
  }, []);

  const name = selectedCustomizations?.name ?? undefined;

  if (!customizations || customizations.length === 0) {
    return <></>;
  }

  return (
    <div className="flex p-4 pl-0 gap-4">
      <div className="flex-none w-12"></div>
      <div className="flex flex-col gap-1">
        <h3 className="leading-none">
          <span className="font-medium">Customization</span>
          <Link
            href="https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/customizations.html"
            className="ml-2 text-sm font-light"
          >
            Learn More
          </Link>
        </h3>
        <div className="pt-1">
          <Select
            onValueChange={(newName) => {
              const c = customizations.find((c) => c.name === newName);
              setSelectedCustomizations(c);
            }}
            value={name}
          >
            <SelectTrigger className="min-w-60 w-fit">
              <span className="whitespace-nowrap">{name ?? "None"} </span>
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {[
                  { name: "None", description: undefined },
                  ...customizations,
                ].map((c, i) => {
                  return (
                    <SelectItem value={c.name ?? ""} key={i}>
                      <span>{c.name}</span>
                      {c.description && (
                        <>
                          <br />
                          <span className="text-xs opacity-70">
                            {c.description}
                          </span>
                        </>
                      )}
                    </SelectItem>
                  );
                })}
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  );
}