Add linkComponent

react18-tools · Jun 18, 2024 · cb9671e · cb9671e
1 parent 97a144d
commit cb9671e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { Core } from "nextjs-darkmode";
 import { Layout } from "@repo/shared/dist/server";
 import { GlobalLoader, Header } from "@repo/shared";
 import { Inter } from "next/font/google";
+import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,7 +15,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
       <body className={inter.className}>
         <Core />
         <Layout>
-          <Header />
+          <Header linkComponent={Link} />
           {children}
         </Layout>
         <GlobalLoader />

diff --git a/packages/shared/src/client/header/header.tsx b/packages/shared/src/client/header/header.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import styles from "./header.module.scss";
 import ThemeSwitch from "./theme-switch";
 import { DrawerButton } from "../drawer-button";
-import { Logo } from "../../server";
+import { Logo, LogoProps } from "../../server";
 
 /**
  * # Header
@@ -11,13 +11,13 @@ import { Logo } from "../../server";
  * This could be a server component with leaf nodes being client components.
  * However, we want to reuse as much code as possible across different examples and also optimize for the best use of bleading edge features.
  */
-export function Header() {
+export function Header(logoProps: LogoProps) {
   const [open, setOpen] = useState(false);
   return (
     <header className={styles.header}>
       <div>
         <DrawerButton {...{ open, setOpen }} />
-        <Logo />
+        <Logo {...logoProps} />
         <nav className={open ? styles.open : ""}>
           <a
             href="https://mayank-chaudhari.vercel.app/"

diff --git a/packages/shared/src/server/logo/logo.tsx b/packages/shared/src/server/logo/logo.tsx
@@ -1,20 +1,29 @@
+import { FC, HTMLProps } from "react";
 import styles from "./logo.module.scss";
 import rebrandingConfig from "@repo/scripts/rebrand.config.json";
 
 const { repo } = rebrandingConfig;
 
-interface LogoProps {
+export interface LogoProps {
   href?: string;
+  linkComponent?: React.ElementType;
 }
 
 /**
  * # Logo
  *
  */
-export function Logo({ href }: LogoProps) {
+export function Logo({ href, linkComponent }: LogoProps) {
+  if (href?.startsWith("http"))
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className={styles.logo}>
+        <span>{repo}</span>
+      </a>
+    );
+  const Link = (linkComponent || "a") as FC<{ to?: string } & HTMLProps<HTMLAnchorElement>>;
   return (
-    <a href={href ?? "/"} target="_blank" rel="noopener noreferrer" className={styles.logo}>
+    <Link href={href ?? "/"} to={href ?? "/"} rel="noopener noreferrer" className={styles.logo}>
       <span>{repo}</span>
-    </a>
+    </Link>
   );
 }