Skip to content

Commit

Permalink
Merge pull request #777 from threshold-network/add-external-links-to-…
Browse files Browse the repository at this point in the history
…sub-navigation-menu

Add external links to sub navigation menu
  • Loading branch information
evandrosaturnino authored Aug 23, 2024
2 parents e2752f1 + 6a4545f commit 8264be8
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 4 deletions.
21 changes: 20 additions & 1 deletion src/components/SubNavigationPills/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import {
HStack,
Stack,
useColorModeValue,
LinkProps,
} from "@threshold-network/components"
import { matchPath, resolvePath, useLocation } from "react-router-dom"
import { RouteProps } from "../../types"
import Link from "../Link"

interface SubNavigationPillsProps {
links: RouteProps[]
externalLinks?: LinkProps[]
}

interface PathMatchResult {
Expand All @@ -26,11 +28,15 @@ interface NavPill extends RouteProps {
isActive?: boolean
}

const SubNavigationPills: FC<SubNavigationPillsProps> = ({ links }) => {
const SubNavigationPills: FC<SubNavigationPillsProps> = ({
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 (
<>
Expand All @@ -55,6 +61,19 @@ const SubNavigationPills: FC<SubNavigationPillsProps> = ({ links }) => {
const isActive = index === activePillIndex
return renderPill(linkWithTitle, isActive)
})}
{externalLinks &&
externalLinks.map(({ title, href }, index) => (
<Link
key={index}
color={externalLinkColor}
isExternal
href={href!}
textDecoration="none"
_hover={{ textDecoration: "none" }}
>
{title}
</Link>
))}
</HStack>
</Box>
</>
Expand Down
8 changes: 6 additions & 2 deletions src/pages/PageLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<PageLayoutProps> = ({
pages,
title,
externalLinks,
children,
...restProps
}) => {
Expand All @@ -23,7 +25,9 @@ const PageLayout: FC<PageLayoutProps> = ({

return (
<>
{links.length > 0 && <SubNavigationPills links={links} />}
{links.length > 0 && (
<SubNavigationPills links={links} externalLinks={externalLinks} />
)}
<Container
maxW={{ base: "2xl", xl: "6xl" }}
mt="6.25rem"
Expand Down
1 change: 1 addition & 0 deletions src/pages/tBTC/Explorer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -245,4 +245,5 @@ ExplorerPage.route = {
path: "explorer",
index: false,
isPageEnabled: true,
hideFromMenu: true,
}
15 changes: 14 additions & 1 deletion src/pages/tBTC/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,20 @@ import { ExplorerPage } from "./Explorer"
import { ResumeDepositPage } from "./Bridge/ResumeDeposit"

const MainTBTCPage: PageComponent = (props) => {
return <PageLayout title={props.title} pages={props.pages} />
const externalLinks = [
{
title: "tBTC Explorer",
href: "https://tbtcscan.com/",
},
]

return (
<PageLayout
title={props.title}
pages={props.pages}
externalLinks={externalLinks}
/>
)
}

MainTBTCPage.route = {
Expand Down
5 changes: 5 additions & 0 deletions src/types/page.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { FC } from "react"
import { LinkProps } from "@threshold-network/components"

export type RouteProps = {
path: string
Expand All @@ -15,3 +16,7 @@ export type RouteProps = {
export type PageComponent = FC<RouteProps> & {
route: RouteProps
}

export type ExternalLinkProps = LinkProps & {
title: string
}

0 comments on commit 8264be8

Please sign in to comment.