fix(): revert to <a> tags for links

CQCL · Oct 8, 2024 · 43477f8 · 43477f8
1 parent b8a831c
commit 43477f8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 12 deletions.
diff --git a/src/custom/docs/components/navmenu/NavigationMenu.tsx b/src/custom/docs/components/navmenu/NavigationMenu.tsx
@@ -15,7 +15,6 @@ import NextLink from 'next/link'
 
 export const Navigation = (props: {
   activePath: string
-  linkComponent: typeof NextLink  | typeof RegularLink
 } & Pick<NavConfig, 'navTextLinks'>) => {
   const isActivePath = (activePath: string, path: string) => {
     return activePath.startsWith(path)
@@ -31,27 +30,27 @@ export const Navigation = (props: {
                   <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"> 
                   <li className="row-span-4">
                     <NavigationMenuLink asChild>
-                      <props.linkComponent
+                      <RegularLink
                         className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                         href={item.href}
                       >
                         {item.logo}
                         <p className="text-sm leading-tight text-muted-foreground py-6">
                           {item.description}
                         </p>
-                      </props.linkComponent>
+                      </RegularLink>
                     </NavigationMenuLink>
                   </li>
                   { item.dropDown.map((subtitle) => {
                     return (
                     <li>
                       <NavigationMenuLink asChild>
-                        <props.linkComponent
+                        <RegularLink
                           className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
                           href={subtitle.href}
                         >
                           <div className="text-sm font-medium leading-none">{subtitle.title}</div>
-                        </props.linkComponent>
+                        </RegularLink>
                       </NavigationMenuLink>
                     </li>
                   )})}

diff --git a/src/custom/docs/components/navmenu/index.tsx b/src/custom/docs/components/navmenu/index.tsx
@@ -1,6 +1,5 @@
 'use client'
 import { Navigation } from './NavigationMenu'
-import NextLink from 'next/link'
 import { QuantinuumLogo } from './QuantinuumLogo'
 import { MobileMenu } from './MobileMenu'
 import { QuantinuumIdent } from './QuantinuumIdent'
@@ -130,7 +129,6 @@ const navConfig = {
 
 
 export const NavBar = (props: {
-  linkComponent: typeof NextLink  | typeof RegularLink
   activePath: string
   enableModeSelector?: boolean
 }) => {
@@ -153,13 +151,13 @@ export const NavBar = (props: {
               <div className='mx-0.5 text-muted-foreground/50'>|</div><div>Documentation</div>
             </div>
           </div>
-          <props.linkComponent href="/" className="ml-4 mr-4 flex items-center space-x-2">
+          <RegularLink href="/" className="ml-4 mr-4 flex items-center space-x-2">
             <span className="hidden font-bold">Quantinuum</span>
-          </props.linkComponent>
+          </RegularLink>
 
         </div>
         <div className="flex items-center gap-5">
-          <Navigation activePath={props.activePath} linkComponent={props.linkComponent} navTextLinks={navConfig.navTextLinks} />
+          <Navigation activePath={props.activePath} navTextLinks={navConfig.navTextLinks} />
           {props.enableModeSelector ? <> <div className='w-px h-6 bg-muted-foreground/50'></div><ModeSelector /> </>: null}
         </div>
       </div>

diff --git a/src/custom/docs/scripts/nav/index.tsx b/src/custom/docs/scripts/nav/index.tsx
@@ -18,6 +18,6 @@ import { navConfigSchema } from '../../components/navmenu/schema';
       navProductName: typeof navProductName !== "undefined" ? navProductName : null
   })
     root.render(
-      <div className="use-tailwind">  <div className="antialiased" style={{fontFamily: `Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`}}><NavBar activePath="/" linkComponent={(props: ComponentProps<'a'>) => <a {...props}></a>}></NavBar> </div></div>
+      <div className="use-tailwind">  <div className="antialiased" style={{fontFamily: `Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`}}><NavBar activePath="/" ></NavBar> </div></div>
     )
   })()
diff --git a/stories/custom/docs-nav.stories.tsx b/stories/custom/docs-nav.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentProps } from "react";
 import {DocsNavBar } from "src";
 
 export function DocsNavDemo() {
-  return <DocsNavBar activePath="/" linkComponent={(props: ComponentProps<'a'>) => <a {...props}></a>} />;
+  return <DocsNavBar activePath="/" />;
 }
 
 const meta: Meta<typeof DocsNavDemo> = {