@fortawesome/free-solid-svg-icons#faExternalLinkAlt TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faExternalLinkAlt.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: links.tsx From advocacy-maps with MIT License | 6 votes |
|
export function External({
href,
children,
className,
plain
}: LinkProps & { plain?: boolean }) {
return (
<a href={href} target="_blank" rel="noreferrer" className={className}>
{children} {!plain && <FontAwesomeIcon icon={faExternalLinkAlt} />}
</a>
)
}
Example #2
| Source File: index.tsx From website with MIT License | 6 votes |
|
SectionHero: React.FC<SectionHeroProps> = ({ title, paragraph, cta }) => {
return (
<section className="relative body-font">
<div className="flex flex-col py-12 md:items-center md:justify-center lg:pt-24 md:flex-row">
<div className="text-lg md:text-center">
<h1 className="title">{title}</h1>
{paragraph && (
<p className="max-w-4xl mx-auto my-4 font-medium paragraph">
{paragraph}
</p>
)}
<div className="flex md:justify-center">
{cta && (
<span className="flex items-center font-medium cursor-pointer md:text-2xl text-informational">
<a target="_blank" href={cta} rel="noreferrer" className="mr-2">
Conoce más sobre la iniciativa
</a>
<FontAwesomeIcon icon={faExternalLinkAlt} width="16px" />
</span>
)}
</div>
</div>
</div>
</section>
);
}
Example #3
| Source File: icon.service.ts From WowUp with GNU General Public License v3.0 | 5 votes |
|
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);
}
Example #4
| Source File: index.tsx From website with MIT License | 5 votes |
|
Hero: React.FC<HeroProps> = ({
title,
subtitle,
description,
discordButtonLabel,
iniciativasButtonText,
handleIniciativasClick,
}) => {
return (
<div className="relative py-32 mx-auto bg-white/0">
<div className="flex items-center justify-center h-full bg-center bg-cover text-primary md:justify-around">
<div className="z-10 w-auto text-center">
<div className="flex flex-col items-center">
<div className="mb-16">
<p className="text-5xl font-black md:font-extrabold sm:text-5xl md:text-7xl xl:text-8xl font-title">
<motion.span
key={title}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 1,
type: 'spring',
velocity: 2,
}}
className="inline-block text-greenFec"
>
{title}
</motion.span>
</p>
<span
style={{ width: 'min-content' }}
className="text-5xl font-black md:font-extrabold sm:text-5xl md:text-7xl xl:text-8xl font-title"
>
{subtitle}
</span>
<p className="max-w-xl mx-auto mt-4 text-xl font-medium text-tertiary md:text-2xl">
{description}
</p>
</div>
<a
target="_blank"
href="https://discord.gg/frontendcafe"
rel="noreferrer"
>
<button className="flex items-center m-auto mb-20 text-md md:px-8 md:py-3 btn btn-primary">
{discordButtonLabel}
<FontAwesomeIcon
icon={faExternalLinkAlt}
width="16px"
className="ml-3"
/>
</button>
</a>
<button
onClick={handleIniciativasClick}
className="flex items-center self-center justify-center font-semibold text-primary"
>
{iniciativasButtonText}
<FontAwesomeIcon
icon={faChevronDown}
width="16px"
className="ml-3 animate-bounce"
/>
</button>
</div>
</div>
</div>
</div>
);
}
Example #5
| Source File: DomainItem.tsx From argo-react with MIT License | 4 votes |
|
DomainItem: React.FC<IDeploymentItemProps> = ({
index,
type,
domainId,
domain,
link,
isSubdomain,
autoDns,
uuid,
ownerVerified,
domainType,
}) => {
const { projectLoading, selectedProject, selectedOrg } =
useContext<IStateModel>(StateContext);
const { fetchProject } = useContext<IActionModel>(ActionContext);
const [editMode, setEditMode] = useState<boolean>(false);
const [editDomainLoading, setEditDomainLoading] = useState<boolean>(false);
const [verifyDomainLoading, setVerifyDomainLoading] = useState<boolean>(false);
const [updateDomainLoading, setUpdateDomainLoading] = useState<boolean>(false);
const [deleteDomainLoading, setDeleteDomainLoading] = useState<boolean>(false);
const [editDomainName, setEditDomainName] = useState<string>(domain);
const [isLatest, setIsLatest] = useState<boolean>(false);
const [deployedSite, setDeployedSite] = useState<string>("");
const sortedDeployments = projectLoading
? []
: selectedProject?.deployments
.filter((dep) => dep.sitePreview)
.sort((a, b) => moment(b.createdAt).diff(moment(a.createdAt)));
let separator = {
base: "",
sep: "",
};
if (link.indexOf("arweave.net") !== -1) {
separator = {
base: "arweave",
sep: "https://arweave.net/",
};
} else if (link.indexOf("siasky.net") !== -1) {
separator = {
base: "sia",
sep: "https://siasky.net/",
};
} else if (link.indexOf("ipfs.infura.io") !== -1) {
separator = {
base: "ipfs",
sep: "https://ipfs.infura.io/ipfs/",
};
}
useEffect(() => {
if (domain) {
setEditDomainName(domain);
}
if (link) {
setDeployedSite(autoDns ? "latest" : link);
}
}, [domain, link, autoDns]);
const editDomainDetails = () => {
setEditDomainLoading(true);
const domainBody = {
orgId: selectedOrg?._id,
name: editDomainName !== domain ? editDomainName : undefined,
link:
deployedSite === "latest"
? (sortedDeployments || [{ sitePreview: undefined }])[0]?.sitePreview
: deployedSite !== link
? deployedSite
: undefined,
isLatest,
projectId: selectedProject?._id,
type: domainType,
};
ApiService.editDomain(domainId, domainBody).subscribe((result) => {
if (result.success) {
setEditMode(false);
setEditDomainName("");
setDeployedSite("");
fetchProject(`${selectedProject?._id}`);
} else {
setEditMode(false);
setEditDomainName("");
setDeployedSite("");
}
setEditDomainLoading(false);
});
};
const deleteDomain = () => {
setDeleteDomainLoading(true);
ApiService.deleteDomain(domainId).subscribe((result) => {
if (result.success) {
setEditDomainName("");
setDeployedSite("");
fetchProject(`${selectedProject?._id}`);
} else {
setEditDomainName("");
setDeployedSite("");
}
setDeleteDomainLoading(false);
});
};
const verifyDomain = () => {
setVerifyDomainLoading(true);
const verify = {
id: domainId,
};
ApiService.verifyDomain(verify).subscribe((result) => {
if (result.verified) {
setEditDomainName("");
setDeployedSite("");
setVerifyDomainLoading(false);
fetchProject(`${selectedProject?._id}`);
} else {
setEditDomainName("");
setDeployedSite("");
setVerifyDomainLoading(false);
}
});
};
const updateHnsDomain = () => {
setUpdateDomainLoading(true);
let records: string = "";
if (!isSubdomain) {
const records_json = [
{
type: "TXT",
host: "_contenthash",
value: `${separator.base}://${link.split(separator.sep)[1].split("/")[0]}`,
ttl: 60,
},
{
type: "ALIAS",
host: "@",
value: `${separator.base}.namebase.io.`,
ttl: 3600,
},
];
records = btoa(JSON.stringify(records_json));
} else {
const records_json = [
{
type: "TXT",
host: `_contenthash.${domain.substring(0, domain.lastIndexOf("."))}`,
value: `${separator.base}://${link.split(separator.sep)[1].split("/")[0]}`,
ttl: 60,
},
{
type: "CNAME",
host: domain.substring(0, domain.lastIndexOf(".")),
value: `${separator.base}.namebase.io.`,
ttl: 3600,
},
];
records = btoa(JSON.stringify(records_json));
}
const url = new URL(
`https://namebase.io/next/domain-manager/${domain.substring(
domain.lastIndexOf(".") + 1,
domain.length,
)}/records`,
);
const redirectUrl = window.location.href;
const encodedRedirectUrl = encodeURIComponent(
encodeURIComponent(redirectUrl.toString()),
);
url.searchParams.append("records", records);
url.searchParams.append("redirect", encodedRedirectUrl);
setUpdateDomainLoading(false);
// console.log(url)
window.location.href = url.toString();
};
const updateEnsDomain = async () => {
try {
await Web3Service.updateEnsContentHash(
domain,
`${separator.base}://${link.split(separator.sep)[1].split("/")[0]}`,
);
} catch (error) {}
};
const setTransaction = (tx: string) => {
setDeployedSite(tx);
if (tx === "latest") {
setIsLatest(true);
} else {
setIsLatest(false);
}
};
useEffect(() => {
return () => {
Web3Service.disconnect();
};
}, []);
return (
<div className="domain-item" key={index}>
{type === "filled" &&
(!editMode ? (
<>
<div className="domain-general-domain-item-header-container">
<div className="domain-general-domain-item-header">
<div className="domain-general-domain-item-header-left">
<div>
<a
href={`${
domainType.indexOf("handshake") !== -1 ? "http" : "https"
}://${domain}`}
target="_blank"
rel="noopener noreferrer"
>
{domain}
<span>
<FontAwesomeIcon icon={faExternalLinkAlt} />
</span>
</a>
</div>
{autoDns ? (
<div className="domain-tag-container">
<span className="domain-tag">Automated</span>
</div>
) : null}
</div>
<div className="domain-general-domain-item-header-right">
<button className="edit-button" onClick={(e) => setEditMode(true)}>
Edit
</button>
<button
className="remove-button"
disabled={deleteDomainLoading}
onClick={deleteDomain}
>
<span>Remove</span>
{deleteDomainLoading ? (
<BounceLoader size={20} color={"#ee0902"} loading={true} />
) : null}
</button>
</div>
</div>
</div>
<div className="domain-general-domain-item-body-container">
<div className="domain-general-domain-item-body">
<div className="domain-general-domain-item-body-item">
{!isSubdomain ? (
<>
<h3>Domain Configuration</h3>
{domainType.indexOf("handshake") === -1 &&
domainType.indexOf("ens") === -1 ? (
<p>
Set the following record on your DNS provider to configure
your domain and verify your ownership:
</p>
) : domainType.indexOf("handshake") !== -1 ? (
<p>
Update the following record on Namebase to configure your
HNS domain and verify domain records:
</p>
) : (
<p>
Update the following record on ENS Dashboard to configure
your ENS domain and verify domain records:
</p>
)}
</>
) : (
<>
<h3>Subdomain Configuration</h3>
{domainType.indexOf("handshake") === -1 &&
domainType.indexOf("ens") === -1 ? (
<p>
Set the following record on your DNS provider to configure
your subdomain and verify your ownership:
</p>
) : domainType.indexOf("handshake") !== -1 ? (
<p>
Update the following record on Namebase to configure your
HNS subdomain and verify subdomain records:
</p>
) : (
<p>
Update the following record on ENS Dashboard to configure
your ENS subdomain and verify domain records:
</p>
)}
</>
)}
<div className="configure-domain-records-table">
<div className="thead">
<div className="tr">
<div
className={`th ${
domainType.indexOf("ens") !== -1 ? "more-width" : ""
}`}
>
Type
</div>
<div
className={`th ${
domainType.indexOf("ens") !== -1 ? "less-width" : ""
}`}
>
Name
</div>
<div className="th">Value</div>
</div>
</div>
{domainType.indexOf("handshake") === -1 &&
domainType.indexOf("ens") === -1 ? (
<div className="tbody">
<div className="tr">
<div className="td">A</div>
<div className="td">{domain}</div>
<div className="td">35.202.158.174</div>
</div>
<div className="tr">
<div className="td">TXT</div>
<div className="td">{domain}</div>
<div className="td">argo={uuid}</div>
</div>
</div>
) : domainType.indexOf("ens") !== -1 ? (
<div className="tbody">
<div className="tr">
<div className="td more-width">CONTENT</div>
<div className="td less-width">{domain}</div>
<div className="td">
{separator.base}://
{link.split(separator.sep)[1].split("/")[0]}
</div>
</div>
</div>
) : !isSubdomain ? (
<div className="tbody">
<div className="tr">
<div className="td">A</div>
<div className="td">@</div>
<div className="td">{separator.base}.namebase.io.</div>
</div>
<div className="tr">
<div className="td">TXT</div>
<div className="td">_contenthash</div>
<div className="td">
{separator.base}://
{link.split(separator.sep)[1].split("/")[0]}
</div>
</div>
</div>
) : (
<div className="tbody">
<div className="tr">
<div className="td">CNAME</div>
<div className="td">{domain}</div>
<div className="td">{separator.base}.namebase.io.</div>
</div>
<div className="tr">
<div className="td">TXT</div>
<div className="td">
_contenthash.
{domain.substring(0, domain.lastIndexOf("."))}
</div>
<div className="td">
{separator.base}://
{link.split(separator.sep)[1].split("/")[0]}
</div>
</div>
</div>
)}
</div>
{!ownerVerified ? (
<div className="verify-domain-container">
<div className="verify-domain-text">
<span>
<FontAwesomeIcon icon={faTimesCircle}></FontAwesomeIcon>
</span>
<span>Update Records and Verify</span>
</div>
<div className="verify-domain-button-container">
{domainType.indexOf("handshake") !== -1 ? (
<button
className="update-domain-button"
disabled={updateDomainLoading}
onClick={updateHnsDomain}
>
Update
{updateDomainLoading ? (
<BounceLoader
size={20}
color={"#fff"}
loading={true}
/>
) : null}
</button>
) : null}
{domainType.indexOf("ens") !== -1 ? (
<button
className="update-domain-button"
disabled={updateDomainLoading}
onClick={updateEnsDomain}
>
Update
{updateDomainLoading ? (
<BounceLoader
size={20}
color={"#fff"}
loading={true}
/>
) : null}
</button>
) : null}
<button
className="verify-domain-button"
disabled={verifyDomainLoading}
onClick={verifyDomain}
>
Verify
{verifyDomainLoading ? (
<BounceLoader size={20} color={"#fff"} loading={true} />
) : null}
</button>
</div>
</div>
) : null}
</div>
</div>
</div>
</>
) : (
<div className="domain-general-domain-item-edit">
<div className="domain-general-domain-item-edit-container">
<div className="domain-general-domain-item-edit-form">
<span className="form-label">Domain</span>
<input
type="text"
className="form-input"
placeholder="mywebsite.com"
value={editDomainName}
onChange={(e) => setEditDomainName(e.target.value)}
/>
</div>
<div className="domain-general-domain-item-edit-form">
<span className="form-label">Site</span>
<div className="form-select-container">
<select
className="form-select"
value={deployedSite}
onChange={(e) => setTransaction(e.target.value)}
>
<option value="">Select Site</option>
{domainType.indexOf("handshake") === -1 &&
domainType.indexOf("ens") === -1 && (
<option value="latest">Latest Deployed</option>
)}
{(sortedDeployments ? sortedDeployments : []).map(
(dep, index) => (
<option value={dep.sitePreview} key={index}>
{dep.sitePreview}
</option>
),
)}
</select>
<span className="select-down-icon">
<FontAwesomeIcon icon={faChevronDown} />
</span>
</div>
</div>
<div className="domain-general-domain-item-edit-button">
<button
className="save-button"
disabled={!editDomainName || !deployedSite}
onClick={editDomainDetails}
>
{editDomainLoading && (
<BounceLoader size={20} color={"#fff"} loading={true} />
)}
Save
</button>
<button
className="cancel-button"
onClick={(e) => setEditMode(false)}
>
Cancel
</button>
</div>
</div>
</div>
))}
{type === "skeleton" && (
<>
<div className="domain-general-domain-item-header-container">
<div className="domain-general-domain-item-header">
<div className="domain-general-domain-item-header-left">
<Skeleton width={300} duration={2} />
</div>
<div className="domain-general-domain-item-header-right">
<Skeleton width={120} duration={2} />
</div>
</div>
</div>
</>
)}
</div>
);
}
