docs: avoid "Puckception" in demo

This is caused by links in iframes
measuredco · Mar 26, 2024 · 54fd993 · 54fd993
1 parent bad4f27
commit 54fd993
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 23 deletions.
diff --git a/apps/demo/config/components/Footer/index.tsx b/apps/demo/config/components/Footer/index.tsx
@@ -2,9 +2,11 @@ import { ReactNode } from "react";
 import { Section } from "../Section";
 
 const FooterLink = ({ children, href }: { children: string; href: string }) => {
+  const El = href ? "a" : "span";
+
   return (
     <li style={{ paddingBottom: 8 }}>
-      <a
+      <El
         href={href}
         style={{
           textDecoration: "none",
@@ -13,7 +15,7 @@ const FooterLink = ({ children, href }: { children: string; href: string }) => {
         }}
       >
         {children}
-      </a>
+      </El>
     </li>
   );
 };

diff --git a/apps/demo/config/components/Header/index.tsx b/apps/demo/config/components/Header/index.tsx
@@ -9,8 +9,10 @@ const NavItem = ({ label, href }: { label: string; href: string }) => {
 
   const isActive = navPath === (href.replace("/edit", "") || "/");
 
+  const El = href ? "a" : "span";
+
   return (
-    <a
+    <El
       href={href || "/"}
       style={{
         textDecoration: "none",
@@ -21,17 +23,17 @@ const NavItem = ({ label, href }: { label: string; href: string }) => {
       }}
     >
       {label}
-    </a>
+    </El>
   );
 };
 
 const Header = ({ editMode }) => (
   <header className={getClassName()}>
     <div className={getClassName("logo")}>LOGO</div>
     <nav className={getClassName("items")}>
-      <NavItem label="Home" href={`${editMode ? "/edit" : ""}`} />
-      <NavItem label="Pricing" href={`/pricing${editMode ? "/edit" : ""}`} />
-      <NavItem label="About" href={`/about${editMode ? "/edit" : ""}`} />
+      <NavItem label="Home" href={`${editMode ? "" : "/"}`} />
+      <NavItem label="Pricing" href={editMode ? "" : "/pricing"} />
+      <NavItem label="About" href={editMode ? "" : "/about"} />
     </nav>
   </header>
 );

diff --git a/apps/demo/config/root.tsx b/apps/demo/config/root.tsx
@@ -16,28 +16,28 @@ function Root({ children, editMode }: RootProps) {
       {children}
       <Footer>
         <Footer.List title="Section">
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
         </Footer.List>
         <Footer.List title="Section">
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
         </Footer.List>
         <Footer.List title="Section">
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
         </Footer.List>
         <Footer.List title="Section">
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
-          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="">Label</Footer.Link>
         </Footer.List>
       </Footer>
     </>