Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add generic link component #3293

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Add generic link component #3293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
225cbe4
add generic link component
meodai Jul 30, 2024
95ab9de
fix window.location
meodai Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions src/components/BitcoinIntegrationPage/News/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { motion } from "framer-motion";
import VideoCard from "../../Common/VideoCard";
import { NewsCard } from "../../NewsPage/Cards";
import LinkArrowUpRight from "../../Common/Icons/LinkArrowUpRight";
import SmartLink from "../../SmartLink";

const MotionLink = motion(Link);

Expand All @@ -36,13 +37,13 @@ function News({ content = "btc" }) {
? "Get all the news and event infos about Chain Fusion Technology on ICP."
: "Get all the news from the Internet Computer ecosystem"}
</motion.p>
<MotionLink
<SmartLink
variants={transitions.item}
href="/news"
className="link-primary link-with-icon mt-3"
>
<LinkArrowRight /> Explore more news
</MotionLink>
Explore more news
</SmartLink>
</div>
</div>
<div className="container-10 !px-0 mt-6 md:mt-20">
Expand All @@ -51,7 +52,7 @@ function News({ content = "btc" }) {
"md:h-[450px] flex flex-col md:flex-row rounded-xl overflow-hidden"
}
>
<Link
<SmartLink
className="aspect-video md:w-7/10 flex relative group"
href="https://b.tc/conference/2024"
>
Expand All @@ -60,7 +61,7 @@ function News({ content = "btc" }) {
alt="Bitcoin 2024 Conference"
className="w-full h-full object-cover"
/>
</Link>
</SmartLink>
<div className="md:w-3/10 flex bg-white-80 border border-solid border-white md:rounded-tr-xl rounded-br-xl p-8 md:p-12 backdrop-blur-2xl">
<div className="self-end">
<h4 className="text-black tw-paragraph mb-0">
Expand All @@ -78,14 +79,14 @@ function News({ content = "btc" }) {
neighborhoods & content tracks to accelerate
hyperbitcoinizatioin across multiple vectors.
</p>
<Link
<SmartLink
className="link-primary link-with-icon mt-4"
href="https://b.tc/conference/2024"
target="_blank"
rel="noopener noreferrer"
>
Register now <LinkArrowUpRight />
</Link>
Register now
</SmartLink>
</div>
</div>
</div>
Expand Down
61 changes: 61 additions & 0 deletions src/components/SmartLink/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React, { useEffect, useState } from 'react';
import Link from '@docusaurus/Link';
import clsx from "clsx";

import DocsIcon from "@site/static/img/svgIcons/docs.svg";
import LinkArrowUpRight from '../Common/Icons/LinkArrowUpRight';
import LinkArrowRight from '../Common/Icons/LinkArrowRight';

const LinkIcon = (to: 'docs' | 'external' | 'internal') => {
switch (to) {
case 'docs':
return <DocsIcon />;
case 'external':
return <LinkArrowUpRight />;
default:
return <LinkArrowRight />;
}
}

type SmartLinkProps = {
href: string;
noIcon?: boolean;
target?: string;
children: React.ReactNode;
};

const SmartLink: React.FC<SmartLinkProps & React.HTMLProps<HTMLAnchorElement>> = ({
href,
noIcon,
target,
children,
...props
}) => {

const [isExternal, setIsExternal] = useState(false);
useEffect(() => {
setIsExternal(
target === '_blank' || (!href.includes(window.location.hostname) && (!href.includes('internetcomputer.org')) && href.startsWith('http'))
);
}, []);

const isDocs = href.includes('developer-docs') || href.includes('/docs');
const iconBefore = isDocs || !isExternal;
const classNames = clsx(props.className);

return (
<Link
href={href}
target={isExternal ? '_blank' : target}
rel={isExternal ? 'noopener noreferrer' : undefined}
{...props}
className={classNames}
>
{!noIcon && iconBefore && LinkIcon(isDocs ? 'docs' : isExternal ? 'external' : 'internal')}
{children}
{!noIcon && !iconBefore && LinkIcon(isDocs ? 'docs' : isExternal ? 'external' : 'internal')}
</Link>
);
};

export default SmartLink;
43 changes: 24 additions & 19 deletions src/pages/chainfusion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import CodeSnippet from "../components/CodeSnippet";
import Logo from "../theme/Logo";
import useMediaQuery from "../utils/use-media-query";
import { ArrowIconRight } from "../components/RoadmapPage/Overlay";
import SmartLink from "../components/SmartLink";

const svgStyles = `
svg .svgcard {
Expand Down Expand Up @@ -225,9 +226,9 @@ const ReadCard: React.FC<ReadProps> = ({ title, description, link }) => (
{title}
</div>
<p className="mt-2 md:mt-4 text-base leading-6 font-[450]">{description}</p>
<Link href={link} className="link-primary mt-4">
<LinkArrowRight /> Read more{" "}
</Link>
<SmartLink href={link} className="link-primary mt-4">
Read more
</SmartLink>
</div>
);

Expand Down Expand Up @@ -427,12 +428,14 @@ function ChainFusion() {
<div className="tw-heading-5 md:tw-heading-3 self-start mt-8 md:mt-12 text-white">
Unifying Web3 experiences
</div>
<Link
<SmartLink
href="/docs/current/developer-docs/multi-chain/overview"
className="button-white self-start mt-8 md:mt-12"
noIcon
target="_blank"
>
Build with Chain fusion
</Link>
</SmartLink>
</div>
</section>
<motion.div
Expand Down Expand Up @@ -467,12 +470,12 @@ function ChainFusion() {
from ICP features.{" "}
</h3>

<Link
<SmartLink
className="link-white link-with-icon mt-2 md:mt-8"
href="/docs/current/developer-docs/multi-chain/supported-chains"
>
<LinkArrowRight /> See supported chains
</Link>
See supported chains
</SmartLink>
</AnimateSpawn>

<AnimateSpawn
Expand Down Expand Up @@ -1223,12 +1226,12 @@ function ChainFusion() {
providing advanced features and seamless integration, it enables
groundbreaking solutions.
</motion.p>
<Link
<SmartLink
className="link-white link-with-icon mt-4 md:mt-6 flex justify-center items-center "
href="https://internetcomputer.org/ecosystem?tag=Chainfusion"
>
<LinkArrowRight /> Discover the Chain Fusion Ecosystem
</Link>
Discover the Chain Fusion Ecosystem
</SmartLink>
</AnimateSpawn>
<AnimateSpawn
className="container-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5 mt-12 md:mt-20"
Expand Down Expand Up @@ -1327,12 +1330,13 @@ function ChainFusion() {
allowing ICP smart contracts to augment EVM-based smart
contracts with additional functionality.
</p>
<Link
<SmartLink
className="button-outline-white-30 mt-6"
href="/ethereum-integration"
noIcon
>
Ethereum Integration
</Link>
</SmartLink>
</div>
<div className="absolute z-0 bottom-0 pointer-events-none">
<img
Expand All @@ -1358,15 +1362,16 @@ function ChainFusion() {
className="flex flex-col md:flex-row justify-center items-center gap-6 mt-4 md:mt-16"
variants={transitions.container}
>
<Link
<SmartLink
href="/docs/current/developer-docs/multi-chain/overview"
className="button-primary"
noIcon
>
Build now{" "}
</Link>
<Link href="/use-cases" className="link-primary link-with-icon">
<LinkArrowRight /> See more ICP Use cases
</Link>
Build now
</SmartLink>
<SmartLink href="/use-cases" className="link-primary link-with-icon">
See more ICP Use cases
</SmartLink>
</motion.div>
</AnimateSpawn>
</section>
Expand Down
Loading