@fortawesome/free-solid-svg-icons#faGlobe TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faGlobe.
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: index.tsx From website with MIT License | 5 votes |
|
ProfileSocialMedia: React.FC<Props> = ({ socialMedia }) => {
return (
<div className="flex items-center space-x-2">
{socialMedia.twitter && (
<Link href={socialMedia.twitter}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faTwitter} />
</a>
</Link>
)}
{socialMedia.web && (
<Link href={socialMedia.web}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4 " icon={faGlobe} />
</a>
</Link>
)}
{socialMedia.linkedin && (
<Link href={socialMedia.linkedin}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faLinkedinIn} />
</a>
</Link>
)}
{socialMedia.github && (
<Link href={socialMedia.github}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faGithub} />
</a>
</Link>
)}
</div>
);
}
Example #2
| Source File: SettingsView.tsx From mysterium-vpn-desktop with MIT License | 5 votes |
|
SettingsView: React.FC = observer(function SettingsView() {
const navigate = useNavigate()
const location = useLocation()
const isFilterTabActive = location.pathname == locations.settingsFilters
const isConnectionTabActive = location.pathname == locations.settingsConnection
const isMysteriumIdTabActive = location.pathname == locations.settingsMysteriumId
return (
<ViewContainer>
<ViewNavBar />
<ViewSplit>
<ViewSidebar>
<SideTop>
<IconSettings color={brandLight} />
<Title>Settings</Title>
</SideTop>
<SideBot>
<NavButton active={isFilterTabActive} onClick={() => navigate(locations.settingsFilters)}>
<FontAwesomeIcon icon={faSlidersH} />
Default filters
</NavButton>
<NavButton
active={isConnectionTabActive}
onClick={() => navigate(locations.settingsConnection)}
>
<FontAwesomeIcon icon={faGlobe} />
Connection
</NavButton>
<NavButton
active={isMysteriumIdTabActive}
onClick={() => navigate(locations.settingsMysteriumId)}
>
<FontAwesomeIcon icon={faUserAlt} />
Mysterium ID
</NavButton>
<Version />
</SideBot>
</ViewSidebar>
<Content>
<Outlet />
</Content>
</ViewSplit>
</ViewContainer>
)
})
Example #3
| Source File: Deployment.tsx From argo-react with MIT License | 4 votes |
|
Deployment = () => {
const timeAgo = new TimeAgo("en-US");
const history = useHistory();
const params = useParams<any>();
const defaultOptions = {
loop: true,
autoplay: true,
animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid",
},
};
const { currentSiteDeployConfig, currentSiteDeployLogs, selectedProject } =
useContext<IStateModel>(StateContext);
const { setLatestDeploymentLogs, setLatestDeploymentConfig, fetchProject } =
useContext<IActionModel>(ActionContext);
const [deploymentStatus, setDeploymentStatus] = useState<string>("pending");
const [buildTime, setBuildTime] = useState<{ min: number; sec: number }>({
min: 0,
sec: 0,
});
const [paymentStatus, setPaymentStatus] = useState<string>("waiting");
const [livePaymentStatus, setlivePaymentStatus] = useState<string>("waiting");
const [paymentMessage, setPaymentMessage] = useState<string>("");
const [paymentDetails, setPaymentDetails] = useState<{
providerFee: number;
argoFee: number;
discount: number;
finalArgoFee: number;
token: string;
}>({ providerFee: 0, argoFee: 0, discount: 0, finalArgoFee: 0, token: "ARGO" });
const [deployedLink, setDeployedLink] = useState<string>("");
const [deploymentLoading, setDeploymentLoading] = useState<boolean>(true);
const [confettiStart, setConfettiStart] = useState<boolean>(false);
const [pinDetailLoading, setPinDetailLoading] = useState<boolean>(true);
const [pinDetail, setPinDetail] = useState<any>({ cid: "N.A", isPinned: false });
const componentIsMounted = useRef(true);
let socket: any = null;
let deploymentSvc: any = null;
useEffect(() => {
fetchProject(params.siteid);
deploymentStartup();
return () => {
if (socket) {
socket.disconnect();
}
if (deploymentSvc) {
deploymentSvc.unsubscribe();
}
componentIsMounted.current = false;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const deploymentStartup = async () => {
setDeploymentLoading(true);
setLatestDeploymentLogs([]);
setDeploymentStatus("pending");
setPaymentStatus("waiting");
setPaymentDetails({
providerFee: 0,
argoFee: 0,
discount: 0,
finalArgoFee: 0,
token: "ARGO",
});
setBuildTime({
min: 0,
sec: 0,
});
socket = socketIOClient(config.urls.API_URL);
deploymentSvc = ApiService.getDeployment(params.deploymentid).subscribe(
(result) => {
if (componentIsMounted.current) {
const deployment = {
githubUrl: result.deployment.project.githubUrl,
branch: result.deployment.configuration.branch,
createdAt: result.deployment.createdAt,
updatedAt: result.deployment.updatedAt,
protocol: result.deployment.configuration.protocol,
commitHash: result.deployment.commitId,
commitMessage: result.deployment.commitMessage,
};
setLatestDeploymentConfig(deployment);
currentSiteDeployLogs.splice(0, currentSiteDeployLogs.length);
result.deployment.logs.forEach((logItem: any) => {
logItem.log.split("\n").forEach((line: string) => {
if (line.trim()) {
currentSiteDeployLogs.push({
log: line,
time: moment(logItem.time).format("hh:mm:ss A MM-DD-YYYY"),
});
}
});
setLatestDeploymentLogs(currentSiteDeployLogs);
scrollToWithContainer(currentSiteDeployLogs.length - 1);
});
if (result.deployment.status.toLowerCase() === "pending") {
socket.on(`deployment.${result.deployment.topic}`, (stream: any) => {
if (stream.type === 1) {
stream.data.split("\n").forEach((line: string) => {
if (line.trim()) {
if (
currentSiteDeployLogs
.map((l) => l.log)
.indexOf(line.trim()) === -1
) {
currentSiteDeployLogs.push({
log: line,
time: moment().format("hh:mm:ss A MM-DD-YYYY"),
});
}
}
});
setDeploymentStatus("pending");
setLatestDeploymentLogs(currentSiteDeployLogs);
scrollToWithContainer(currentSiteDeployLogs.length - 1);
} else if (stream.type === 2) {
const protocolLink = stream.data.logsToCapture.sitePreview;
setDeployedLink(protocolLink);
setDeploymentStatus(protocolLink ? "deployed" : "failed");
const buildMins = Number.parseInt(`${stream.data.buildTime / 60}`);
const buildSecs = Number.parseInt(`${stream.data.buildTime % 60}`);
setBuildTime({ min: buildMins, sec: buildSecs });
} else if (stream.type === 3) {
setDeployedLink("");
setDeploymentStatus("failed");
setBuildTime({ min: 0, sec: 0 });
}
});
} else {
setDeployedLink(result.deployment.sitePreview);
setDeploymentStatus(result.deployment.status.toLowerCase());
const buildMins = Number.parseInt(`${result.deployment.buildTime / 60}`);
const buildSecs = Number.parseInt(`${result.deployment.buildTime % 60}`);
setBuildTime({ min: buildMins, sec: buildSecs });
}
const paymentSocketOpeningCondition = result.deployment.payment
? result.deployment.payment.status !== "success" &&
result.deployment.payment.status !== "failed"
: true;
if (paymentSocketOpeningCondition) {
if (result.deployment.payment) {
setPaymentStatus(result.deployment.payment.status);
}
socket.on(`payment.${result.deployment.topic}`, (stream: any) => {
if (stream.type === 1) {
setPaymentStatus("started");
} else if (stream.type === 2) {
const paymentDetails = stream.payload;
if (paymentDetails.status === "success") {
setPaymentDetails(paymentDetails);
setlivePaymentStatus("success");
} else {
setPaymentMessage(paymentDetails.failedMessage);
}
setPaymentStatus(paymentDetails.status);
}
});
} else {
if (result.deployment.payment.status === "success") {
const paymentDetails = {
providerFee: result.deployment.payment.providerFee,
argoFee: result.deployment.payment.argoFee,
discount: result.deployment.payment.discount,
finalArgoFee: result.deployment.payment.finalArgoFee,
token: result.deployment.payment.token,
};
setPaymentDetails(paymentDetails);
setPaymentStatus("success");
} else {
setPaymentStatus("failed");
setPaymentMessage(result.deployment.payment.failedMessage);
}
}
setDeploymentLoading(false);
}
},
);
};
useEffect(() => {
if (deploymentStatus === "deployed" && livePaymentStatus === "success") {
setConfettiStart(true);
}
}, [deploymentStatus, livePaymentStatus]);
let displayGithubRepo = "";
let githubBranchLink = "";
let githubCommitLink = "";
if (currentSiteDeployConfig) {
displayGithubRepo = currentSiteDeployConfig.githubUrl.substring(
19,
currentSiteDeployConfig.githubUrl.length - 4,
);
githubBranchLink = `${currentSiteDeployConfig.githubUrl.substring(
0,
currentSiteDeployConfig.githubUrl.length - 4,
)}/tree/${currentSiteDeployConfig.branch}`;
githubCommitLink = `${currentSiteDeployConfig.githubUrl.substring(
0,
currentSiteDeployConfig.githubUrl.length - 4,
)}/commit/${currentSiteDeployConfig.commitHash}`;
}
const domains =
selectedProject && deployedLink
? selectedProject.domains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const subdomains =
selectedProject && deployedLink
? selectedProject.subdomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const hnsDomains =
selectedProject && deployedLink
? selectedProject.handshakeDomains.filter(
(d) => deployedLink.indexOf(d.link) !== -1,
)
: [];
const hnsSubdomains =
selectedProject && deployedLink
? selectedProject.handshakeSubdomains.filter(
(d) => deployedLink.indexOf(d.link) !== -1,
)
: [];
const ensDomains =
selectedProject && deployedLink
? selectedProject.ensDomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const isDomainOrSubPresent =
[...domains, ...subdomains, ...hnsDomains, ...hnsSubdomains, ...ensDomains]
.length > 0;
const scrollToWithContainer = (index: number) => {
window.scrollTo({
top: document.getElementById("deploy-logs-container")?.scrollHeight,
left: 0,
behavior: "smooth",
});
var myElement = document.getElementById(`deploy-logs-items-${index}`);
var topPos = myElement?.offsetTop;
if (document && document.getElementById("deploy-logs-list")) {
(document as any).getElementById("deploy-logs-list").scrollTop = topPos
? topPos
: 0;
}
};
const showProtocolImage = (protocol: string) => {
switch (protocol) {
case "arweave":
return (
<img
src={require("../../../../assets/png/ar_light.png")}
alt="arweave"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "skynet":
return (
<img
src={require("../../../../assets/png/skynet.png")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-filecoin":
return (
<img
src={require("../../../../assets/png/filecoin.png")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-pinata":
return (
<img
src={require("../../../../assets/svg/pinata.svg")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "neofs":
return (
<img
src={require("../../../../assets/png/neo-light.png")}
alt="neofs"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
default:
return (
<img
src={require("../../../../assets/png/question_mark.png")}
alt="?"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
}
};
const showProtocolText = (protocol: string) => {
switch (protocol) {
case "arweave":
return (
<span className="site-deployment-link">
Deploying on Arweave, Preview in a minute
</span>
);
case "skynet":
return (
<span className="site-deployment-link">
Deploying on Skynet, Preview in a minute
</span>
);
case "ipfs-filecoin":
return (
<span className="site-deployment-link">
Deploying on IPFS with Filecoin, Preview in a minute
</span>
);
case "ipfs-pinata":
return (
<span className="site-deployment-link">
Deploying on IPFS with Pinata, Preview in a minute
</span>
);
case "neofs":
return (
<span className="site-deployment-link">
Deploying on NeoFS, Preview in a minute
</span>
);
default:
return (
<span className="site-deployment-link">
Cannot find Protocol to Deploy
</span>
);
}
};
const showProtocolPrice = (protocol: string) => {
switch (protocol) {
case "arweave":
return <span>{paymentDetails?.providerFee || 0} AR</span>;
case "skynet":
return <span>N.A</span>;
case "neofs":
return <span>{paymentDetails?.providerFee || 0} NEO</span>;
case "ipfs-filecoin":
return <span>{paymentDetails?.providerFee || 0} FIL</span>;
case "ipfs-pinata":
return <span>N.A</span>;
default:
return <span>{paymentDetails?.providerFee || 0} ?</span>;
}
};
useEffect(() => {
if (deploymentStatus === "deployed") {
if (currentSiteDeployConfig?.protocol === "ipfs-filecoin") {
getFilecoinPinDetais();
} else if (currentSiteDeployConfig?.protocol === "ipfs-pinata") {
getPinataPinDetais();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [deploymentStatus, currentSiteDeployConfig?.protocol]);
const getFilecoinPinDetais = async () => {
setPinDetailLoading(true);
if (deployedLink) {
const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
ApiService.getFilecoinPinDetails(cid).subscribe((data) => {
if (componentIsMounted.current) {
setPinDetail(data);
setPinDetailLoading(false);
}
});
} else {
setPinDetailLoading(false);
}
};
const getPinataPinDetais = async () => {
setPinDetailLoading(true);
if (deployedLink) {
const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
ApiService.getPinataPinDetails(cid).subscribe((data) => {
if (componentIsMounted.current) {
setPinDetail(data);
setPinDetailLoading(false);
}
});
} else {
setPinDetailLoading(false);
}
};
const [width, height] = useWindowSize();
const confettiStyles = {
zIndex: 2,
position: "fixed" as "fixed",
pointerEvents: "none" as "none",
top: 0,
left: 0,
bottom: 0,
right: 0,
};
return (
<div className="SiteDeployment">
{confettiStart && (
<div className="confetti-container">
<Confetti
width={width}
height={height}
style={confettiStyles}
numberOfPieces={700}
recycle={false}
/>
</div>
)}
<div
className="site-deployment-back"
onClick={(e) => {
fetchProject(params.siteid);
history.push(`/org/${params.orgid}/sites/${params.siteid}/deployments/`);
}}
>
<span>
<FontAwesomeIcon icon={faChevronLeft} />
</span>
<span>All Deploys</span>
</div>
<div className="site-deployment-card-container max-width-set">
<div className="site-deployment-card-header">
<h2 className="site-deployment-card-header-title">
{!deploymentLoading ? (
<>
<span>
{deploymentStatus === "pending" ? (
"Deploy in Progress"
) : deploymentStatus === "deployed" ? (
<div>Deployment successful</div>
) : (
"Deployment failed"
)}
</span>
{deploymentStatus === "pending" ? (
<Lottie options={defaultOptions} height={54} width={76} />
) : deploymentStatus === "deployed" ? (
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/rocket_background.svg")}
alt="rocket"
className="rocket-icon"
height={24}
width={24}
loading="lazy"
/>
</LazyLoadedImage>
) : deploymentStatus === "failed" ? (
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/error.svg")}
alt="rocket"
className="rocket-icon"
height={24}
width={24}
loading="lazy"
/>
</LazyLoadedImage>
) : null}
</>
) : (
<Skeleton width={200} duration={2} />
)}
</h2>
<p className="site-deployment-card-header-description">
{!deploymentLoading ? (
<>
<u>Production</u>: {currentSiteDeployConfig?.branch}
{currentSiteDeployConfig.commitHash ? (
<>
@
<a
href={githubCommitLink}
target="_blank"
rel="noopener noreferrer"
className="commit-link"
>
{currentSiteDeployConfig.commitHash.substr(0, 7)}{" "}
{currentSiteDeployConfig.commitMessage
? `- ${currentSiteDeployConfig.commitMessage.substr(
0,
84,
)}...`
: ""}
</a>
</>
) : null}
</>
) : (
<Skeleton width={400} duration={2} />
)}
</p>
<p className="site-deployment-card-header-description">
{!deploymentLoading ? (
<>
{deploymentStatus === "pending"
? currentSiteDeployLogs[0]?.time
? `Deployment started ${timeAgo.format(
moment(`${currentSiteDeployConfig.createdAt}`).toDate(),
)}`
: null
: `Deployment done at ${moment(
currentSiteDeployConfig.updatedAt,
).format("MMM DD, YYYY hh:mm a")}`}
</>
) : (
<Skeleton width={400} duration={2} />
)}
</p>
</div>
<div className="site-deployment-card-content">
{isDomainOrSubPresent && (
<div className="site-deployment-card-fields">
<span className="site-deployment-github-icon">
<FontAwesomeIcon icon={faGlobe} />
</span>
{!deploymentLoading ? (
<>
{domains.map((d: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${d.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{d.name}
</a>
{(i !== a.length - 1 ||
subdomains.length > 0 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 || ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{i !== a.length - 1 && <span className="comma-sep">,</span>}
</>
))}
</>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
)}
<div className="site-deployment-card-fields">
<span className="site-deployment-github-icon">
<FontAwesomeIcon icon={faGithub} />
</span>
{!deploymentLoading ? (
<a
href={githubBranchLink}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{displayGithubRepo} (branch: {currentSiteDeployConfig?.branch})
</a>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
<div className="site-deployment-card-fields">
<LazyLoadedImage height={24} once>
{showProtocolImage(currentSiteDeployConfig?.protocol)}
</LazyLoadedImage>
{!deploymentLoading ? (
deploymentStatus === "deployed" ? (
<a
href={deployedLink}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
Preview deploy
</a>
) : deploymentStatus === "pending" ? (
showProtocolText(currentSiteDeployConfig?.protocol)
) : (
<span className="site-deployment-link">
Deploying failed, no link available
</span>
)
) : (
<Skeleton width={200} duration={2} />
)}
</div>
{paymentStatus === "success" && deploymentStatus === "deployed" && (
<div className="site-deployment-card-fields">
<div className="button-container">
<SharePopup
isOpen={confettiStart}
link={deployedLink}
protocol={currentSiteDeployConfig.protocol}
paymentStatus={paymentStatus}
/>
</div>
</div>
)}
</div>
</div>
{deploymentStatus !== "pending" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">Deploy Summary</div>
<div className="deploy-summary-item">
<div className="deploy-summary-item-info-icon">
<FontAwesomeIcon icon={faInfoCircle} />
</div>
<div className="deploy-summary-item-info-container">
<div className="deploy-summary-item-info-title">
Total time to Build & Deploy: {buildTime?.min}m {buildTime?.sec}s
</div>
{(buildTime?.min !== 0 || buildTime?.sec !== 0) && (
<div className="deploy-summary-item-info-description">
Build started at {currentSiteDeployLogs[0]?.time} and ended at{" "}
{currentSiteDeployLogs[currentSiteDeployLogs.length - 1]?.time}.
</div>
)}
</div>
</div>
</div>
)}
{deploymentStatus !== "pending" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">Payment Summary</div>
<div className="site-deployment-body">
{paymentStatus === "waiting" && (
<div className="payment-loading">
<span>
<PulseLoader size={20} color={"#3664ae"} />
</span>
<span>Waiting for the payment to be processed...</span>
</div>
)}
{paymentStatus === "started" && (
<div className="payment-loading">
<span>
<PulseLoader size={20} color={"#3664ae"} />
</span>
<span>Processing Payment...</span>
</div>
)}
{paymentStatus === "failed" && (
<div className="payment-failed">
<span>
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/error.svg")}
alt="rocket"
className="rocket-icon"
height={36}
width={36}
loading="lazy"
/>
</LazyLoadedImage>
</span>
<span>{paymentMessage}</span>
{paymentMessage ===
"Payment failed due to insufficient allowance." && (
<button
className="set-allowance"
onClick={() => history.push("/wallet/recharge")}
>
Set Allowance
</button>
)}
</div>
)}
{paymentStatus === "success" && (
<>
<div className="site-deployment-body-item">
<label>Build Time:</label>
<span>
{buildTime?.min}m {buildTime?.sec}s
</span>
</div>
<div className="site-deployment-body-item">
<label>Provider Fee:</label>
{showProtocolPrice(currentSiteDeployConfig?.protocol)}
</div>
<div className="site-deployment-body-item">
<label>Total Fee:</label>
<span>
{paymentDetails?.argoFee || 0} ${paymentDetails?.token || "ARGO"}
</span>
</div>
<div className="site-deployment-body-item">
<label>Discount:</label>
<span>
{paymentDetails?.discount || 0} $
{paymentDetails?.token || "ARGO"}
</span>
</div>
<div className="site-deployment-body-item">
<label>Final Payment:</label>
<span>
{paymentDetails?.finalArgoFee || 0} $
{paymentDetails?.token || "ARGO"}
</span>
</div>
</>
)}
</div>
</div>
)}
{deploymentStatus === "deployed" &&
currentSiteDeployConfig?.protocol === "ipfs-filecoin" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">
Filecoin Pinning Details
</div>
<div className="site-deployment-body">
<div className="site-deployment-body-item">
<label>Filecoin CID:</label>
<span>
{!pinDetailLoading ? (
pinDetail.cid
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
<div className="site-deployment-body-item">
<label>Filecoin Pinning Status:</label>
<span>
{!pinDetailLoading ? (
pinDetail.isPinned ? (
"Pinned"
) : (
"Not Pinned"
)
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
{!pinDetailLoading && pinDetail.isPinned && (
<div className="site-deployment-body-item">
<label>Filecoin Pinned Date:</label>
<span>
{!pinDetailLoading ? (
moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
)}
</div>
</div>
)}
{deploymentStatus === "deployed" &&
currentSiteDeployConfig?.protocol === "ipfs-pinata" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">
Pinata Pinning Details
</div>
<div className="site-deployment-body">
<div className="site-deployment-body-item">
<label>IPFS CID:</label>
<span>
{!pinDetailLoading ? (
pinDetail.cid
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
<div className="site-deployment-body-item">
<label>IPFS Pinning Status:</label>
<span>
{!pinDetailLoading ? (
pinDetail.isPinned ? (
"Pinned"
) : (
"Not Pinned"
)
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
{!pinDetailLoading && pinDetail.isPinned && (
<div className="site-deployment-body-item">
<label>IPFS Pinned Date:</label>
<span>
{!pinDetailLoading ? (
moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
)}
</div>
</div>
)}
<div
className="site-deployment-card-container deploy-container"
id="deploy-logs-container"
>
<div className="card-header-title deploy-logs-card-title">
<div className="card-header-deploy-title-container">
<div className="card-header-deploy-title">Deploy Logs</div>
<div className="card-header-deploy-subtitle">
Please note that the realtime log streaming may not show all the logs
based on your connection bandwidth. Please refresh if you don't see
some logs
</div>
</div>
{/* <button className="copy-to-clipboard-button">Copy to clipboard</button> */}
<div className="refresh-control" onClick={deploymentStartup}>
<FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
</div>
</div>
<div className="deploy-logs-container" id="deploy-logs-list">
{
<div className="deploy-logs-items" id={`deploy-logs-items-${1}`} key={1}>
{currentSiteDeployLogs?.map((currLog, i) => (
<div
className="deploy-logs-items"
id={`deploy-logs-items-${i}`}
key={i}
>
{currLog.time}:{" "}
{currLog.log.indexOf("https://arweave.net/") !== -1 ||
currLog.log.indexOf("https://siasky.net/") !== -1 ||
currLog.log.indexOf("https://http.fs.neo.org/") !== -1 ||
currLog.log.indexOf("https://ipfs.infura.io/ipfs/") !== -1 ? (
<a
href={currLog.log.trim()}
className="log-site-link"
target="_blank"
rel="noopener noreferrer"
>
{currLog.log}
</a>
) : (
currLog.log
)}
</div>
))}
</div>
}
</div>
</div>
</div>
);
}
Example #4
| Source File: ProjectTopCard.tsx From argo-react with MIT License | 4 votes |
|
ProjectTopCard = () => {
const history = useHistory();
const { projectLoading, selectedProject } = useContext<IStateModel>(StateContext);
const { setRepoForTriggerDeployment } = useContext<IActionModel>(ActionContext);
const sortedDeployments = projectLoading
? []
: selectedProject?.deployments
.filter((d) => d.status.toLowerCase() === "deployed")
.sort((a, b) => moment(b.createdAt).diff(moment(a.createdAt)));
let latestDeployment: any = {};
if (sortedDeployments) {
latestDeployment = sortedDeployments[0];
}
const showProtocolImage = (protocol: string) => {
switch (protocol) {
case "arweave":
return (
<img
src={require("../../../../../assets/png/ar_light.png")}
alt="github"
className="project-top-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "skynet":
return (
<img
src={require("../../../../../assets/png/skynet.png")}
alt="github"
className="project-top-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "neofs":
return (
<img
src={require("../../../../../assets/png/neo-light.png")}
alt="github"
className="project-top-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-filecoin":
return (
<img
src={require("../../../../../assets/png/filecoin.png")}
alt="github"
className="project-top-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-pinata":
return (
<img
src={require("../../../../../assets/svg/pinata.svg")}
alt="github"
className="project-top-logo"
height={24}
width={24}
loading="lazy"
/>
);
default:
return (
<img
src={require("../../../../../assets/png/question_mark.png")}
alt="github"
className="project-top-logo"
height={24}
width={24}
loading="lazy"
/>
);
}
};
const lastPublishedDate = moment(selectedProject?.updatedAt).format(
"MMM DD, YYYY hh:mm A",
);
const imageUrl = (imageUrl: string | undefined) => {
if (imageUrl) {
return imageUrl;
}
return config.urls.IMAGE_NOT_FOUND;
};
let displayGithubRepo = "";
let githubBranchLink = "";
if (selectedProject) {
displayGithubRepo = selectedProject.githubUrl.substring(
19,
selectedProject.githubUrl.length - 4,
);
githubBranchLink = `${selectedProject.githubUrl.substring(
0,
selectedProject.githubUrl.length - 4,
)}/tree/${selectedProject?.latestDeployment?.configuration.branch}`;
}
const domains = selectedProject ? selectedProject.domains : [];
const subdomains = selectedProject ? selectedProject.subdomains : [];
const hnsDomains = selectedProject ? selectedProject.handshakeDomains : [];
const hnsSubdomains = selectedProject ? selectedProject.handshakeSubdomains : [];
const ensDomains = selectedProject ? selectedProject.ensDomains : [];
const isDomainOrSubPresent =
[...domains, ...subdomains, ...hnsDomains, ...hnsSubdomains].length > 0;
const triggerDeployment = () => {
const latest = selectedProject?.latestDeployment;
setRepoForTriggerDeployment({
github_url: selectedProject?.githubUrl,
branch: latest?.configuration.branch,
framework: latest?.configuration.framework,
publish_dir: latest?.configuration.publishDir,
package_manager: latest?.configuration.packageManager,
build_command: latest?.configuration.buildCommand,
workspace: latest?.configuration.workspace,
protocol: latest?.configuration.protocol,
});
history.push("/deploy/new");
};
return (
<div className="ProjectTopCard">
<div className="project-top-card-container max-width-set">
<div className="deployment-top-card-container">
<div className="deployment-screenshot-container">
{!projectLoading ? (
<a
href={latestDeployment?.sitePreview}
target="_blank"
rel="noopener noreferrer"
>
<img
className="deployment-screenshot"
src={imageUrl(selectedProject?.latestDeployment?.screenshot?.url)}
// onClick={latestDeployment?.sitePreview}
alt={"Preview not Available"}
/>
</a>
) : (
<Skeleton height={200} width={320} duration={2} />
)}
</div>
<div className="deployment-right">
<div className="project-top-card-header">
<div className="project-top-card-header-title-container">
<h2 className="project-top-card-header-title">
{!projectLoading ? (
selectedProject?.name
) : (
<Skeleton width={200} duration={2} />
)}
</h2>
<div className="archive-tag-container">
{!projectLoading ? (
selectedProject?.state === "ARCHIVED" ? (
<span className="archive-tag">{selectedProject?.state}</span>
) : null
) : null}
</div>
</div>
<p className="project-top-card-header-description">
{!projectLoading ? (
<>
<u>Production</u>:{" "}
{selectedProject?.latestDeployment?.configuration.branch} - Last
published at {lastPublishedDate}
</>
) : (
<Skeleton width={400} duration={2} />
)}
</p>
</div>
<div className="project-top-card-content">
{isDomainOrSubPresent && (
<div className="project-top-card-fields">
<div className="project-top-github-icon">
<FontAwesomeIcon icon={faGlobe} />
</div>
<div className="domain-overview-container">
{!projectLoading ? (
<>
{domains.map((d: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${d.name}`}
className="project-top-link"
target="_blank"
rel="noopener noreferrer"
>
{d.name}
</a>
{(i !== a.length - 1 ||
subdomains.length > 0 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${s.name}`}
className="project-top-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="project-top-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="project-top-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 || ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${s.name}.link`}
className="project-top-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{i !== a.length - 1 && (
<span className="comma-sep">,</span>
)}
</>
))}
</>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
</div>
)}
<div className="project-top-card-fields">
<span className="project-top-github-icon">
<FontAwesomeIcon icon={faGithub} />
</span>
<a
href={githubBranchLink}
className="project-top-link"
target="_blank"
rel="noopener noreferrer"
>
{!projectLoading ? (
<>
{displayGithubRepo} (branch:{" "}
{selectedProject?.latestDeployment?.configuration.branch})
</>
) : (
<Skeleton width={300} duration={2} />
)}
</a>
</div>
<div className="project-top-card-fields">
{showProtocolImage(
selectedProject?.latestDeployment?.configuration.protocol!,
)}
{latestDeployment?.sitePreview ? (
<a
href={latestDeployment?.sitePreview}
className="project-top-link"
target="_blank"
rel="noopener noreferrer"
>
{!projectLoading ? (
"Latest Successful Site Preview"
) : (
<Skeleton width={300} duration={2} />
)}
</a>
) : !projectLoading ? (
<span>Site preview not available</span>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
{!projectLoading && (
<div className="project-top-card-fields">
<button
className="trigger-deploy-button"
onClick={triggerDeployment}
>
Redeploy Latest
</button>
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
}
Example #5
| Source File: index.tsx From website with MIT License | 4 votes |
|
MentorCard: React.FC<MentorCardProps> = ({
mentor,
topics,
isLogged,
openModal,
}) => {
const isActive = mentor.status === 'ACTIVE';
const isUnavailable = mentor.status === 'NOT_AVAILABLE';
const findTopicsName = (id: string) => {
const topic = topics.find((e) => e._id == id);
return topic.title;
};
return (
<motion.div
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: isActive ? 1 : 0.66 }}
exit={{ y: -100, opacity: 0 }}
className="flex flex-col w-full p-6 rounded-lg bg-zinc-800 space-between "
>
<div>
<div className="flex justify-between w-full">
<div>
<Image
className="object-cover w-24 h-24 mr-4 rounded-full bg-zinc-300"
src={`${mentor.photo.src}?h=200`}
alt={`Foto de ${mentor.name} `}
height={96}
width={96}
placeholder="blur"
blurDataURL={`${mentor.photo.src}?h=50`}
/>
</div>
<div>
<div className="mb-4">
{isUnavailable ? (
<button
type="button"
className="capitalize cursor-not-allowed text-md btn btn-secondary"
>
No disponible
</button>
) : isActive && mentor.calendly && isLogged ? (
<Link href={mentor.calendly}>
<a
target="_blank"
className="capitalize border text-md text-primary border-zinc-50 btn hover:text-zinc-800 hover:bg-zinc-50 hover:border-zinc-50"
>
<span>Solicitar mentoría</span>
</a>
</Link>
) : (
<button
type="button"
onClick={() => openModal()}
className=" border text-md text-primary border-zinc-50 btn hover:text-zinc-800 hover:bg-zinc-50 hover:border-zinc-50"
>
Solicitar mentoría
</button>
)}
</div>
<div className="flex mt-2 place-content-end">
{mentor.web && (
<Link href={mentor.web}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4 " icon={faGlobe} />
</a>
</Link>
)}
{mentor.linkedin && (
<Link href={mentor.linkedin}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faLinkedinIn} />
</a>
</Link>
)}
{mentor.github && (
<Link href={mentor.github}>
<a
target="_blank"
className="flex items-center justify-center w-8 h-8 ml-2 rounded-full text-primary bg-zinc-700"
>
<FontAwesomeIcon className="w-4 h-4" icon={faGithub} />
</a>
</Link>
)}
</div>
</div>
</div>
</div>
<div>
<h2 className="mb-2 text-xl font-bold text-primary">{mentor.name}</h2>
</div>
<div className="flex flex-col justify-between h-full">
<div className="flex">
<div>
<p className="leading-relaxed text-md text-tertiary md:min-h-64">
{mentor.description ? mentor.description : '---'}
</p>
</div>
</div>
<div className="flex flex-wrap mt-4 md:justify-start">
{mentor.topics &&
mentor.topics?.map((topic) => (
<TopicBadge key={topic._key} topic={findTopicsName(topic._ref)} />
))}
</div>
</div>
</motion.div>
);
}
Example #6
| Source File: index.tsx From nouns-monorepo with GNU General Public License v3.0 | 4 votes |
|
NavLocaleSwitcher: React.FC<NavLocalSwitcherProps> = props => {
const { buttonStyle } = props;
const [buttonUp, setButtonUp] = useState(false);
const history = useHistory();
const [showLanguagePickerModal, setShowLanguagePickerModal] = useState(false);
const activeLocale = useActiveLocale();
const statePrimaryButtonClass = usePickByState(
navDropdownClasses.whiteInfo,
navDropdownClasses.coolInfo,
navDropdownClasses.warmInfo,
history,
);
const stateSelectedDropdownClass = usePickByState(
navDropdownClasses.whiteInfoSelected,
navDropdownClasses.dropdownActive,
navDropdownClasses.dropdownActive,
history,
);
const buttonStyleTop = usePickByState(
navDropdownClasses.whiteInfoSelectedTop,
navDropdownClasses.coolInfoSelected,
navDropdownClasses.warmInfoSelected,
history,
);
const buttonStyleBottom = usePickByState(
navDropdownClasses.whiteInfoSelectedBottom,
navDropdownClasses.coolInfoSelected,
navDropdownClasses.warmInfoSelected,
history,
);
const customDropdownToggle = React.forwardRef<RefType, Props>(({ onClick, value }, ref) => (
<>
<div
className={clsx(
navDropdownClasses.wrapper,
buttonUp ? stateSelectedDropdownClass : statePrimaryButtonClass,
)}
onClick={e => {
e.preventDefault();
onClick(e);
}}
>
<div className={navDropdownClasses.button}>
<div className={navDropdownClasses.dropdownBtnContent}>
{<FontAwesomeIcon icon={faGlobe} />}
</div>
<div className={buttonUp ? navDropdownClasses.arrowUp : navDropdownClasses.arrowDown}>
<FontAwesomeIcon icon={buttonUp ? faSortUp : faSortDown} />{' '}
</div>
</div>
</div>
</>
));
const CustomMenu = React.forwardRef((props: CustomMenuProps, ref: React.Ref<HTMLDivElement>) => {
return (
<div
ref={ref}
style={props.style}
className={props.className}
aria-labelledby={props.labeledBy}
>
{SUPPORTED_LOCALES.map((locale: SupportedLocale, index: number) => {
let dropDownStyle;
let buttonStyle;
switch (index) {
case 0:
dropDownStyle = classes.dropDownTop;
buttonStyle = buttonStyleTop;
break;
case SUPPORTED_LOCALES.length - 1:
dropDownStyle = classes.dropDownBottom;
buttonStyle = buttonStyleBottom;
break;
default:
dropDownStyle = classes.dropDownInterior;
buttonStyle = buttonStyleBottom;
}
return (
<div
className={clsx(
navDropdownClasses.button,
navDropdownClasses.dropdownPrimaryText,
buttonStyle,
dropDownStyle,
classes.desktopLanguageButton,
)}
onClick={() => setLocale(locale)}
>
{LOCALE_LABEL[locale]}
{activeLocale === locale && <FontAwesomeIcon icon={faCheck} height={24} width={24} />}
</div>
);
})}
</div>
);
});
return (
<>
{showLanguagePickerModal && (
<LanguageSelectionModal onDismiss={() => setShowLanguagePickerModal(false)} />
)}
<div
className={clsx(navDropdownClasses.nounsNavLink, responsiveUiUtilsClasses.mobileOnly)}
onClick={() => setShowLanguagePickerModal(true)}
>
<NavBarButton
buttonText={<Trans>Language</Trans>}
buttonIcon={<FontAwesomeIcon icon={faGlobe} />}
buttonStyle={buttonStyle}
/>
</div>
<Dropdown
className={clsx(navDropdownClasses.nounsNavLink, responsiveUiUtilsClasses.desktopOnly)}
onToggle={() => setButtonUp(!buttonUp)}
autoClose={true}
>
<Dropdown.Toggle as={customDropdownToggle} id="dropdown-custom-components" />
<Dropdown.Menu className={`${navDropdownClasses.desktopDropdown} `} as={CustomMenu} />
</Dropdown>
</>
);
}
Example #7
| Source File: AddMediaTabBar.tsx From sync-party with GNU General Public License v3.0 | 4 votes |
|
export default function AddMediaTabBar({
activeTab,
changeTab,
isUploading,
toggleCollapseAddMediaMenu
}: Props): ReactElement {
const { t } = useTranslation();
return (
<div className="flex flex-row mb-1 justify-between">
<ul className="flex">
<li className="mr-3">
<button
className={
'inline-block border rounded py-1 px-3 mb-2 noOutline' +
(activeTab === 'user' ? ' text-black bg-white' : '')
}
onClick={(): void => changeTab('user')}
title={t('mediaMenu.addUserTab')}
>
<FontAwesomeIcon
className={
activeTab === 'user'
? ' text-black bg-white'
: ''
}
icon={faUser}
></FontAwesomeIcon>
</button>
</li>
<li className="mr-3">
<button
className={
'inline-block border rounded py-1 px-3 mb-2 noOutline' +
(activeTab === 'web' ? ' text-black bg-white' : '')
}
onClick={(): void => changeTab('web')}
title={t('mediaMenu.addWebTab')}
>
<FontAwesomeIcon
className={
activeTab === 'web'
? ' text-black bg-white'
: ''
}
icon={faGlobe}
></FontAwesomeIcon>
</button>
</li>
<li className="mr-3">
<button
className={
'inline-block border rounded py-1 px-3 mb-2 noOutline' +
(activeTab === 'file' ? ' text-black bg-white' : '')
}
onClick={(): void => changeTab('file')}
title={t('mediaMenu.addFileTab')}
>
<FontAwesomeIcon
className={
activeTab === 'file'
? ' text-black bg-white'
: ''
}
icon={faCloudUploadAlt}
></FontAwesomeIcon>
</button>
</li>
</ul>
<div>
{!isUploading && (
<div
className="p-1 cursor-pointer"
onClick={toggleCollapseAddMediaMenu}
title={t('mediaMenu.collapseTitle')}
>
<FontAwesomeIcon
className="text-gray-200 hover:text-gray-100"
size="lg"
icon={faAngleUp}
></FontAwesomeIcon>
</div>
)}
</div>
</div>
);
}
