@fortawesome/free-solid-svg-icons#faLink TypeScript Examples

FaqItem = ({ id, title, children }: { id: string; title: string; children?: React.ReactNode }) => {
    return (
        <li id={id}>
            <b className="faq-link-hover-target">
                {title}{" "}
                <a href={`#${id}`} className="faq-link-icon">
                    <FontAwesomeIcon icon={faLink} />
                </a>
            </b>
            <br />
            {children}
        </li>
    );
}

export function DisconnectedStatus() {
	return (
		<Stack direction="row" alignItems="center" spacing={2}>
			<Button
				startIcon={<Icon icon={faLink}/>}
				color="inherit"
				variant="outlined"
				component={Link}
				to="/connect"
			>
				Connect
			</Button>
		</Stack>
	)
}

export function ConnectionStatus() {
	const connection = useContext(ConnectorContext)

	switch (connection?.state.status) {
		case "connected":
			return <Alert severity="success" icon={<Icon icon={faLink}/>}>
				<AlertTitle>Current Status: connected</AlertTitle>
				Application is connected to wallet <Address
				address={connection.state.connection.address}
				trim={false}
			/>
			</Alert>
		case "disconnected":
			const error = connectionErrorMessage(connection?.state.error)
			return <Alert severity="error" icon={<Icon icon={faLinkSlash}/>}>
				<AlertTitle>Disconnected</AlertTitle>
				Application currently not connected to any wallet
				{ error && <Box sx={{ mt: 1 }}>Last attempt error: {error}</Box> }
			</Alert>
		case "connecting":
			return <Alert severity="info">
				<AlertTitle>Connecting...</AlertTitle>
				Connection to wallet in process
			</Alert>
		case "initializing":
			return <Alert severity="info">
				<AlertTitle>Initializing...</AlertTitle>
				Connector initialization
			</Alert>
		default:
			return null
	}
}

export function CopyLinkButton({ text, variant = 'blue' }: { text: string, variant?: ButtonVariant }) {
  return (
    <Button onClick={() => copyToClipboard(text)} variant={variant} className="btn--with-icon">
      <FontAwesomeIcon icon={faLink} height="24" className="mr-2" />
      Copy link
    </Button>
  );
}

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

NetworkModal: React.FC<IProps> = ({ show, handleCloseModal, cb }) => {
  const themeContext = useContext(ThemeContext);
  const { theme } = themeContext!;
  const [networkUrlInput, setNetworkUrlInput] = useState("");
  const [networkNameInput, setNetworkNameInput] = useState("");

  const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();
    cb(sanitizeHtml(networkUrlInput), sanitizeHtml(networkNameInput));
    setNetworkUrlInput("");
    setNetworkNameInput("");
  };

  return (
    <Modal
      className={
        theme === "dark"
          ? "custom-modal dark-theme"
          : "custom-modal light-theme"
      }
      show={show}
      onHide={handleCloseModal}
    >
      <div className="modal-header">
        <h6>Add Network</h6>
      </div>
      <Modal.Body>
        <Form onSubmit={handleSubmit}>
          <Form.Group>
            <div className="d-flex align-items-center mb-2">
              <FontAwesomeIcon className="mr-3" icon={faTag} />
              <Form.Control
                required
                type="text"
                value={networkNameInput}
                maxLength={20}
                onChange={(e) => {
                  setNetworkNameInput(e.target.value.toString());
                }}
                placeholder="Enter Name"
              />
            </div>
          </Form.Group>
          <Form.Group>
            <div className="d-flex align-items-center mb-4">
              <FontAwesomeIcon className="mr-3" icon={faLink} />
              <Form.Control
                required
                type="text"
                value={networkUrlInput}
                onChange={(e) => {
                  setNetworkUrlInput(e.target.value.toString());
                }}
                placeholder="Enter Url"
              />
            </div>
          </Form.Group>
          <div>
            <Button block type="submit">
              Save
            </Button>
          </div>
        </Form>
      </Modal.Body>
    </Modal>
  );
}

library.add(faLink, faHandPeace, faCopy, faInfoCircle);

FaqPage = ({ region }: { region: Region }) => {
    const { pathname, hash } = useLocation();

    useEffect(() => {
        if (hash !== "") {
            setTimeout(() => {
                const element = document.getElementById(hash.replace("#", ""));
                if (element !== null) {
                    element.scrollIntoView();
                }
            }, 0);
        }
    }, [pathname, hash]);

    useEffect(() => {
        Manager.setRegion(region);
    }, [region]);

    document.title = "FAQ - Atlas Academy DB";

    const faqContent = [warFaq(region)];

    return (
        <>
            <h1>Frequently Asked Questions</h1>
            <hr />
            <ol type="I" className="faq-toc">
                {faqContent.map((faq) => (
                    <li key={faq.id}>
                        <a href={`#${faq.id}`}>{faq.title}</a>
                        <ol>
                            {faq.subSections.map((subSection) => (
                                <li key={subSection.id}>
                                    <a href={`#${subSection.id}`}>{subSection.title}</a>
                                </li>
                            ))}
                        </ol>
                    </li>
                ))}
            </ol>
            <hr />
            <ol type="I" className="faq-list">
                {faqContent.map((faq) => (
                    <li key={faq.id} id={faq.id}>
                        <span className="faq-link-hover-target">
                            {faq.title}{" "}
                            <a href={`#${faq.id}`} className="faq-link-icon">
                                <FontAwesomeIcon icon={faLink} />
                            </a>
                        </span>
                        <ol>
                            {faq.subSections.map((subSection) => (
                                <FaqItem key={subSection.id} id={subSection.id} title={subSection.title}>
                                    {subSection.content}
                                </FaqItem>
                            ))}
                        </ol>
                    </li>
                ))}
            </ol>
        </>
    );
}

DestinationParam: FunctionComponent<Props> = ({ params }) => {
	const [destination, setDestination] = useState(params.destination);

	useEffect(() => {
		setDestination(params.destination);
	}, [params.destination]);

	const onChange = (ev: ChangeEvent<HTMLInputElement>): void => {
		setDestination(ev.target.value);
		// we must cancel the potential previous invalid state
		// https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
		ev.target.setCustomValidity('');

		const valid = ev.target.checkValidity();

		if (valid) {
			const value = ev.target.value === '' ? undefined : ev.target.value;
			params.setDestination(value);
		}
	};

	const onBlur = (ev: FocusEvent<HTMLInputElement>): void => {
		const valid = ev.target.checkValidity();
		if (!valid) {
			ev.target.setCustomValidity('Must be a level URL or a level ID');
			ev.target.reportValidity();
		}
	};

	return (
		<label title="The level where this door leads. Leave empty to go to the menu.">
			<FontAwesomeIcon icon={faLink}/>
			&#32;
			destination level:
			&#32;
			<input
				type="text"
				value={destination || ''}
				onChange={onChange} placeholder="https://bombhopper.io/?level=b3cd72ad-e47c-4aac-a720-3ea871d0330c"
				pattern={doorDestinationRegex.source}
				onBlur={onBlur}
			/>
		</label>
	);
}

function Header({
  href = '/',
  demoPage,
  onMenuClick,
  isLoggedIn,
  withNavMenu = false,
  theme = 'default',
  className = '',
}: ConnectedProps<typeof connector> & Props) {
  const [isNavMenuOpen, setIsNavMenuOpen] = useState(false);
  return (
    <>

      <header className={`${styles.header} ${styles[`theme-${theme}`]} ${className}`}>
        <div className="d-flex justify-content-between w-100 align-items-center h-100">
          {onMenuClick && (
            <Button
              onClick={onMenuClick}
              className={`header__menu-btn ${styles.menu}`}
            >
              <FontAwesomeIcon icon={faBars} />
            </Button>
          )}
          <Link href={href}>
            <a className={styles.logo}>
              <picture>
                <source
                  srcSet={`${process.env.CLOUDFRONT_PUBLIC}/public/logo-square--S.jpg`}
                  media="(max-width: 600px)"
                />
                <source
                  srcSet={`${process.env.CLOUDFRONT_PUBLIC}/public/logo.png`}
                  media="(min-width: 600px)"
                />
                <img
                  src={`${process.env.CLOUDFRONT_PUBLIC}/public/logo.png`}
                  alt="FrontEnd.ro logo"
                />
              </picture>
            </a>
          </Link>
          {demoPage && (
            <p className={`${styles['demo-label']} text-white mx-5 text-bold`}>
              DEMO
            </p>
          )}
        </div>
        <div className="d-flex align-items-center">
          {isLoggedIn ? (
            <>
              <NotificationTooltip
                className="mr-2"
                theme={theme}
                tooltipClassName={styles['notification-tooltip']}
              />
              <AccountTooltip theme={theme} />
            </>
          ) : null}
          {withNavMenu && (
            <Button className={styles['nav-menu']} variant="light" onClick={() => setIsNavMenuOpen(true)}>
              Nav
              <FontAwesomeIcon icon={faLink} />
            </Button>
          )}
        </div>
      </header>
      {
        withNavMenu && (
          <AsideMenu
            hideScrollOnBody
            title="FrontEnd.ro"
            isOpen={isNavMenuOpen}
            className={styles['aside-menu']}
            close={() => setIsNavMenuOpen(false)}
          >
            <div className={styles['nav-wrapper']}>
              <NavLinks />
            </div>
          </AsideMenu>
        )
      }

    </>
  );
}