borgwarehouse/Components/Repo/QuickCommands/QuickCommands.js

//Lib
import React from 'react';
import { useState } from 'react';
import classes from './QuickCommands.module.css';
import { IconSettingsAutomation, IconCopy } from '@tabler/icons-react';

export default function QuickCommands(props) {
  ////Vars
  const wizardEnv = props.wizardEnv;
  //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
  let FQDN;
  let SSH_SERVER_PORT;
  if (props.lanCommand && wizardEnv.FQDN_LAN && wizardEnv.SSH_SERVER_PORT_LAN) {
    FQDN = wizardEnv.FQDN_LAN;
    SSH_SERVER_PORT =
      wizardEnv.SSH_SERVER_PORT_LAN === 'false' ? '' : ':' + wizardEnv.SSH_SERVER_PORT_LAN;
  } else {
    FQDN = wizardEnv.FQDN;
    SSH_SERVER_PORT = wizardEnv.SSH_SERVER_PORT === 'false' ? '' : ':' + wizardEnv.SSH_SERVER_PORT;
  }

  //State
  const [isCopied, setIsCopied] = useState(false);

  //Functions
  const handleCopy = async () => {
    // Asynchronously call copy to clipboard
    navigator.clipboard
      .writeText(`ssh://${wizardEnv.UNIX_USER}@${FQDN}${SSH_SERVER_PORT}/./${props.repositoryName}`)
      .then(() => {
        // If successful, update the isCopied state value
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1500);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div className={classes.container}>
      {isCopied ? (
        <div className={classes.copyValid}>Copied !</div>
      ) : (
        <div className={classes.tooltip}>
          ssh://{wizardEnv.UNIX_USER}@{FQDN}
          {SSH_SERVER_PORT}/./
          {props.repositoryName}
        </div>
      )}

      {props.lanCommand && <div className={classes.lanBadge}>LAN</div>}

      <div className={classes.icons}>
        <button onClick={handleCopy} className={classes.copyButton}>
          <IconCopy color='#65748b' stroke={1.25} />
        </button>
        <div className={classes.quickSetting}>
          <IconSettingsAutomation color='#65748b' stroke={1.25} />
        </div>
      </div>
    </div>
  );
}