diff --git a/src/components/SubNavigationPills/index.tsx b/src/components/SubNavigationPills/index.tsx index 8621ed21f..f5f953d0b 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,11 +28,15 @@ 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) const wrapperBorderColor = useColorModeValue("gray.100", "gray.700") + const externalLinkColor = useColorModeValue("gray.500", "gray.300") return ( <> @@ -55,6 +61,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 && ( + + )} { - return + const externalLinks = [ + { + title: "tBTC Explorer", + href: "https://tbtcscan.com/", + }, + ] + + return ( + + ) } MainTBTCPage.route = { diff --git a/src/types/page.ts b/src/types/page.ts index c549758d8..473002081 100644 --- a/src/types/page.ts +++ b/src/types/page.ts @@ -1,4 +1,5 @@ import { FC } from "react" +import { LinkProps } from "@threshold-network/components" export type RouteProps = { path: string @@ -15,3 +16,7 @@ export type RouteProps = { export type PageComponent = FC & { route: RouteProps } + +export type ExternalLinkProps = LinkProps & { + title: string +}