feat: support react node as title

premieroctet · Jan 21, 2025 · f8db9dc · f8db9dc
1 parent 522c5b2
commit f8db9dc
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/.changeset/great-kings-grin.md b/.changeset/great-kings-grin.md
@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": minor
+---
+
+feat: support react node as title (#512)
diff --git a/packages/next-admin/src/components/Menu.tsx b/packages/next-admin/src/components/Menu.tsx
@@ -14,7 +14,7 @@ import {
 import { clsx } from "clsx";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import { Fragment, useState } from "react";
+import { Fragment, useState, ReactNode } from "react";
 
 import { useTheme } from "next-themes";
 import { useConfig } from "../context/ConfigContext";
@@ -44,7 +44,7 @@ export type MenuProps = {
   resourcesIcons: AdminComponentProps["resourcesIcons"];
   user?: AdminComponentProps["user"];
   externalLinks?: AdminComponentProps["externalLinks"];
-  title?: string;
+  title?: ReactNode;
 };
 
 export default function Menu({
@@ -223,9 +223,13 @@ export default function Menu({
               href={basePath}
               className="flex h-[40px] items-center gap-2 overflow-hidden"
             >
-              <div className="text-md dark:text-dark-nextadmin-brand-inverted overflow-hidden text-ellipsis whitespace-nowrap font-semibold">
-                {title}
-              </div>
+              {typeof title === "string" ? (
+                <div className="text-md dark:text-dark-nextadmin-brand-inverted overflow-hidden text-ellipsis whitespace-nowrap font-semibold">
+                  {title}
+                </div>
+              ) : (
+                title
+              )}
             </Link>
           </div>
           <Divider />

diff --git a/packages/next-admin/src/components/NextAdmin.tsx b/packages/next-admin/src/components/NextAdmin.tsx
@@ -99,12 +99,13 @@ export function NextAdmin({
     }
   };
 
+  const titleElement = isAppDir ? title : options?.title;
+
   return (
     <>
       <PageLoader />
       {!isAppDir && (
         <Head>
-          <title>{title}</title>
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <link rel="icon" href="/favicon.ico" />
         </Head>
@@ -119,7 +120,7 @@ export function NextAdmin({
         isAppDir={isAppDir}
         translations={translations}
         locale={locale}
-        title={title}
+        title={titleElement}
         sidebar={sidebar}
         resourcesIcons={resourcesIcons}
         user={user}

diff --git a/packages/next-admin/src/types.ts b/packages/next-admin/src/types.ts
@@ -686,7 +686,7 @@ export type NextAdminOptions = {
    *
    * @default "Admin"
    */
-  title?: string;
+  title?: ReactNode;
   /**
    * `model` is an object that represents the customization options for each model in your schema.
    */
@@ -872,7 +872,7 @@ export type AdminComponentProps = {
    *
    * @default "Admin"
    */
-  title?: string;
+  title?: ReactNode;
   sidebar?: SidebarConfiguration;
   user?: AdminUser;
   externalLinks?: ExternalLink[];
@@ -937,7 +937,8 @@ export type CustomInputProps = Partial<{
   disabled: boolean;
   required?: boolean;
   mode: "create" | "edit";
-}> & ComponentProps<"input">;
+}> &
+  ComponentProps<"input">;
 
 export type TranslationKeys =
   | "actions.delete.label"

diff --git a/packages/next-admin/src/utils/props.ts b/packages/next-admin/src/utils/props.ts
@@ -293,7 +293,7 @@ export const getMainLayoutProps = ({
     customPages,
     resourcesTitles,
     isAppDir,
-    title: options?.title ?? "Admin",
+    title: isAppDir ? (options?.title ?? "Admin") : null,
     sidebar: options?.sidebar,
     resourcesIcons,
     externalLinks: options?.externalLinks,