From 891c7b0f3b7f2194061adb6957f49301307b223b Mon Sep 17 00:00:00 2001 From: evandrosaturnino Date: Fri, 16 Aug 2024 03:17:06 -0300 Subject: [PATCH 1/4] add external links to sub navigation menu --- src/components/Link/index.tsx | 3 ++- src/components/SubNavigationPills/index.tsx | 20 +++++++++++++++++++- src/pages/PageLayout.tsx | 8 ++++++-- src/pages/tBTC/Explorer/index.tsx | 1 + src/types/page.ts | 5 +++++ 5 files changed, 33 insertions(+), 4 deletions(-) diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx index abc31f4fc..9b17b0638 100644 --- a/src/components/Link/index.tsx +++ b/src/components/Link/index.tsx @@ -23,6 +23,7 @@ const Link: FC = forwardRef( ({ isExternal, href, to, icon, children, ...props }, ref) => { const defaultColor = useColorModeValue("brand.500", "white") const finalColor = props.color ? props.color : defaultColor + const finalTextDecoration = props.textDecoration ?? "underline" return ( = forwardRef( target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener noreferrer" : undefined} color={finalColor} - textDecoration="underline" + textDecoration={finalTextDecoration} {...props} > {children} diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx index 8621ed21f..4483d53ab 100644 --- a/src/components/SubNavigationPills/index.tsx +++ b/src/components/SubNavigationPills/index.tsx @@ -6,6 +6,7 @@ import { HStack, Stack, useColorModeValue, + LinkProps, } from "@threshold-network/components" import { matchPath, resolvePath, useLocation } from "react-router-dom" import { RouteProps } from "../../types" @@ -13,6 +14,7 @@ import Link from "../Link" interface SubNavigationPillsProps { links: RouteProps[] + externalLinks?: LinkProps[] } interface PathMatchResult { @@ -26,7 +28,10 @@ interface NavPill extends RouteProps { isActive?: boolean } -const SubNavigationPills: FC = ({ links }) => { +const SubNavigationPills: FC = ({ + links, + externalLinks, +}) => { const { pathname } = useLocation() const linksWithTitle = links.filter((link) => !!link.title) const activePillIndex = getActivePillIndex(linksWithTitle, pathname) @@ -55,6 +60,19 @@ const SubNavigationPills: FC = ({ links }) => { const isActive = index === activePillIndex return renderPill(linkWithTitle, isActive) })} + {externalLinks && + externalLinks.map(({ title, href }, index) => ( + + {title} + + ))} diff --git a/src/pages/PageLayout.tsx b/src/pages/PageLayout.tsx index 9d87ba2b9..1da9ab318 100644 --- a/src/pages/PageLayout.tsx +++ b/src/pages/PageLayout.tsx @@ -2,17 +2,19 @@ import { FC } from "react" import { Container, ContainerProps } from "@threshold-network/components" import { Outlet } from "react-router-dom" import SubNavigationPills from "../components/SubNavigationPills" -import { PageComponent } from "../types" +import { PageComponent, ExternalLinkProps } from "../types" import useDocumentTitle from "../hooks/useDocumentTitle" export interface PageLayoutProps extends ContainerProps { pages?: PageComponent[] title?: string + externalLinks?: ExternalLinkProps[] } const PageLayout: FC = ({ pages, title, + externalLinks, children, ...restProps }) => { @@ -23,7 +25,9 @@ const PageLayout: FC = ({ return ( <> - {links.length > 0 && } + {links.length > 0 && ( + + )} & { route: RouteProps } + +export type ExternalLinkProps = LinkProps & { + title: string +} From 245141bd8f468e540cf43520bf1999754dce788c Mon Sep 17 00:00:00 2001 From: evandrosaturnino Date: Fri, 16 Aug 2024 03:20:11 -0300 Subject: [PATCH 2/4] add tbtcscan link to tbtc sub navigation menu --- src/pages/tBTC/index.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pages/tBTC/index.tsx b/src/pages/tBTC/index.tsx index 363f4c1e4..c46176eb1 100644 --- a/src/pages/tBTC/index.tsx +++ b/src/pages/tBTC/index.tsx @@ -7,7 +7,20 @@ import { ExplorerPage } from "./Explorer" import { ResumeDepositPage } from "./Bridge/ResumeDeposit" const MainTBTCPage: PageComponent = (props) => { - return + const externalLinks = [ + { + title: "tBTC Explorer", + href: "https://tbtcscan.com/", + }, + ] + + return ( + + ) } MainTBTCPage.route = { From a117029d2dc747a0f7d4f8642f7924c1f0f62d26 Mon Sep 17 00:00:00 2001 From: evandrosaturnino Date: Mon, 19 Aug 2024 23:31:50 -0300 Subject: [PATCH 3/4] Update external link color in sub nav --- src/components/SubNavigationPills/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx index 4483d53ab..f5f953d0b 100644 --- a/src/components/SubNavigationPills/index.tsx +++ b/src/components/SubNavigationPills/index.tsx @@ -36,6 +36,7 @@ const SubNavigationPills: FC = ({ const linksWithTitle = links.filter((link) => !!link.title) const activePillIndex = getActivePillIndex(linksWithTitle, pathname) const wrapperBorderColor = useColorModeValue("gray.100", "gray.700") + const externalLinkColor = useColorModeValue("gray.500", "gray.300") return ( <> @@ -64,7 +65,7 @@ const SubNavigationPills: FC = ({ externalLinks.map(({ title, href }, index) => ( Date: Mon, 19 Aug 2024 23:33:29 -0300 Subject: [PATCH 4/4] Remove text decoration explicit assingment in link --- src/components/Link/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx index 9b17b0638..abc31f4fc 100644 --- a/src/components/Link/index.tsx +++ b/src/components/Link/index.tsx @@ -23,7 +23,6 @@ const Link: FC = forwardRef( ({ isExternal, href, to, icon, children, ...props }, ref) => { const defaultColor = useColorModeValue("brand.500", "white") const finalColor = props.color ? props.color : defaultColor - const finalTextDecoration = props.textDecoration ?? "underline" return ( = forwardRef( target={isExternal ? "_blank" : undefined} rel={isExternal ? "noopener noreferrer" : undefined} color={finalColor} - textDecoration={finalTextDecoration} + textDecoration="underline" {...props} > {children}