react-icons/fi#FiArrowRightCircle TypeScript Examples

SettingsPage: React.FC<Props> = ({ realm }) => {
    const { t } = useTranslation();
    if (!realm.canCurrentUserEdit) {
        return <NotAuthorized />;
    }

    const heading = realm.isRoot
        ? t("manage.realm.heading-root")
        : t("manage.realm.heading", { realm: realm.name });

    const breadcrumbs = (realm.isRoot ? realm.ancestors : realm.ancestors.concat(realm))
        .map(({ name, path }) => ({ label: name, link: path }));

    return (
        <RealmSettingsContainer css={{ maxWidth: 900 }}>
            <Breadcrumbs path={breadcrumbs} tail={<i>{t("realm.page-settings")}</i>} />
            <PageTitle title={heading} />
            <p>{t("manage.realm.descendants-count", { count: realm.numberOfDescendants })}</p>
            <div css={{
                margin: "32px 0",
                display: "flex",
                flexWrap: "wrap",
                gap: 16,
            }}>
                <LinkButton to={realm.path}>
                    <FiArrowRightCircle />
                    {t("manage.realm.view-page")}
                </LinkButton>
                <LinkButton to={`/~manage/realm/add-child?parent=${pathToQuery(realm.path)}`}>
                    <FiPlus />
                    {t("realm.add-sub-page")}
                </LinkButton>
            </div>
            <section><General fragRef={realm} /></section>
            <section><ChildOrder fragRef={realm} /></section>
            <section><DangerZone fragRef={realm} /></section>
        </RealmSettingsContainer>
    );
}

BLE = ({ connecting }: BLEProps): JSX.Element => {
  const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);

  const { handleSubmit } = useForm<{
    device?: BluetoothDevice;
  }>();

  const updateBleDeviceList = useCallback(async (): Promise<void> => {
    const ble = new IBLEConnection();
    const devices = await ble.getDevices();
    setBleDevices(devices);
  }, []);

  useEffect(() => {
    void updateBleDeviceList();
  }, [updateBleDeviceList]);

  const onSubmit = handleSubmit(async () => {
    await setConnection(connType.BLE);
  });

  return (
    <form onSubmit={onSubmit} className="flex flex-grow flex-col">
      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
        {bleDevices.length > 0 ? (
          bleDevices.map((device, index) => (
            <div
              className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
              key={index}
            >
              <div className="my-auto">{device.name}</div>
              <IconButton
                nested
                onClick={async (): Promise<void> => {
                  await setConnection(connType.BLE);
                }}
                icon={<FiArrowRightCircle />}
                disabled={connecting}
              />
            </div>
          ))
        ) : (
          <div className="m-auto">
            <p>No previously connected devices found</p>
          </div>
        )}
      </div>
      <Button
        className="mt-2 ml-auto"
        onClick={async (): Promise<void> => {
          if (connecting) {
            await connection.disconnect();
          } else {
            await onSubmit();
          }
        }}
        border
      >
        {connecting ? 'Disconnect' : 'Connect'}
      </Button>
    </form>
  );
}

Serial = ({ connecting }: SerialProps): JSX.Element => {
  const [serialDevices, setSerialDevices] = useState<SerialPort[]>([]);
  const dispatch = useAppDispatch();

  const { handleSubmit } = useForm<{
    device?: SerialPort;
  }>();

  const updateSerialDeviceList = useCallback(async (): Promise<void> => {
    const serial = new ISerialConnection();
    const devices = await serial.getPorts();
    setSerialDevices(devices);
  }, []);

  useEffect(() => {
    void updateSerialDeviceList();
  }, [updateSerialDeviceList]);

  const onSubmit = handleSubmit(async () => {
    await setConnection(connType.SERIAL);
  });

  return (
    <form onSubmit={onSubmit} className="flex flex-grow flex-col">
      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
        {serialDevices.length > 0 ? (
          serialDevices.map((device, index) => (
            <div
              className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
              key={index}
            >
              <div className="my-auto flex gap-4">
                <p>
                  Vendor: <small>{device.getInfo().usbVendorId}</small>
                </p>
                <p>
                  Device: <small>{device.getInfo().usbProductId}</small>
                </p>
              </div>
              <IconButton
                onClick={async (): Promise<void> => {
                  dispatch(
                    setConnectionParams({
                      type: connType.SERIAL,
                      params: {
                        port: device,
                      },
                    }),
                  );
                  await setConnection(connType.SERIAL);
                }}
                disabled={connecting}
                icon={<FiArrowRightCircle />}
              />
            </div>
          ))
        ) : (
          <div className="m-auto">
            <p>No previously connected devices found</p>
          </div>
        )}
      </div>
      <Button
        className="mt-2 ml-auto"
        onClick={async (): Promise<void> => {
          if (connecting) {
            await connection.disconnect();
          } else {
            await onSubmit();
          }
        }}
        border
      >
        {connecting ? 'Disconnect' : 'Connect'}
      </Button>
    </form>
  );
}