chore: add internal page to command menu (#4151)

* chore: add internal page to command menu * Create modern-keys-smell.md * update gotofunction
marigold-ui · Sep 2, 2024 · 0a317d9 · 0a317d9
1 parent 5cdece1
commit 0a317d9
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 14 deletions.
diff --git a/.changeset/modern-keys-smell.md b/.changeset/modern-keys-smell.md
@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+chore: add internal page to command menu
diff --git a/docs/app/_components/CommandItems.tsx b/docs/app/_components/CommandItems.tsx
@@ -1,4 +1,4 @@
-import { links, themeswitch } from '@/lib/config';
+import { internal, links, themeswitch } from '@/lib/config';
 import { iterateTokens } from '@/lib/utils';
 import { Icons, cn } from '@/ui';
 import { Command, CommandGroup, useCommandState } from 'cmdk';
@@ -36,7 +36,7 @@ interface CommandItemProps {
   };
 }
 
-interface ChangeThemeItemProps extends CommandItemProps {
+interface ChangeOpenItemProps extends CommandItemProps {
   setOpen: Dispatch<SetStateAction<boolean>>;
 }
 interface PagesItemProps extends CommandItemProps {
@@ -52,6 +52,28 @@ interface PagesItemProps extends CommandItemProps {
   }[];
 }
 
+// Helpers
+//----------------
+const useGoto = (
+  setOpen: Dispatch<SetStateAction<boolean>>,
+  setPages?: Dispatch<SetStateAction<[]>>
+) => {
+  const router = useRouter();
+  const params = useSearchParams();
+
+  const goto = ({ slug, hash = '' }: { slug: string; hash?: string }) => {
+    const url = `/${slug}?${params.toString() || 'theme=core'}${hash}`;
+
+    router.push(url);
+    setOpen(false);
+    if (setPages) {
+      setPages([]);
+    }
+  };
+
+  return goto;
+};
+
 // Components
 // ---------------
 export const CopyItem = ({ children, copyValue, ...props }: CopyItemProps) => {
@@ -137,7 +159,7 @@ export const IconItem = ({ classNames }: CommandItemProps) => {
 export const ChangeThemeItem = ({
   classNames,
   setOpen,
-}: ChangeThemeItemProps) => {
+}: ChangeOpenItemProps) => {
   const { updateTheme } = useThemeSwitch();
   const changeTheme = (theme: string) => {
     updateTheme(theme);
@@ -202,17 +224,7 @@ export const PagesItem = ({
   subPage,
   setPages,
 }: PagesItemProps) => {
-  const router = useRouter();
-  const params = useSearchParams();
-
-  const goto = ({ slug, hash = '' }: { slug: string; hash?: string }) => {
-    const url = `/${slug}?${params.toString() || 'theme=core'}${hash}`;
-
-    router.push(url);
-    setOpen(false);
-    setPages([]);
-  };
-
+  const goto = useGoto(setOpen, setPages);
   return (
     <CommandGroup heading={name} key={name} className={classNames.section}>
       {items.map(page => (
@@ -255,3 +267,25 @@ export const PagesItem = ({
     </CommandGroup>
   );
 };
+
+export const InternalPage = ({ classNames, setOpen }: ChangeOpenItemProps) => {
+  const goto = useGoto(setOpen);
+  return (
+    <>
+      {internal.map(val =>
+        Object.values(val).map(items =>
+          items.map(({ name, slug }) => (
+            <Command.Item
+              className={classNames.item}
+              key={name}
+              value={slug}
+              onSelect={() => goto({ slug })}
+            >
+              {name}
+            </Command.Item>
+          ))
+        )
+      )}
+    </>
+  );
+};
diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx
@@ -11,6 +11,7 @@ import {
   ChangeThemeItem,
   ExternalLinkItem,
   IconItem,
+  InternalPage,
   PagesItem,
   TokenItem,
 } from './CommandItems';
@@ -171,6 +172,9 @@ export const SiteMenu = () => {
             {query && <TokenItem classNames={classNames} />}
             {/* copy icon command */}
             {query && <IconItem classNames={classNames} />}
+            {query.length > 6 && (
+              <InternalPage classNames={classNames} setOpen={setOpen} />
+            )}
           </Command.List>
           <div className="flex h-10 items-center justify-end gap-4 border-t px-2 text-xs">
             <Inline space={2} alignY="center">

diff --git a/docs/lib/config.ts b/docs/lib/config.ts
@@ -131,3 +131,14 @@ export const themeswitch = [
     ],
   },
 ];
+
+export const internal = [
+  {
+    items: [
+      {
+        name: 'Internal',
+        slug: '__internal__',
+      },
+    ],
+  },
+];