added hotkey only on selected item

marigold-ui · Jun 17, 2024 · b2915ad · b2915ad
1 parent 06bc9f6
commit b2915ad
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/docs/app/_components/CommandItems.tsx b/docs/app/_components/CommandItems.tsx
@@ -207,27 +207,25 @@ export const PagesItem = ({
   setPages,
 }: PagesItemProps) => {
   const router = useRouter();
-
   const goto = (slug: string) => {
     router.push(`/${slug}`);
     setOpen(false);
     setPages([]);
   };
-
   return (
     <CommandGroup heading={name} key={name} className={classNames.section}>
       {items.map(page => (
         <>
           <Command.Item
-            className={classNames.item}
+            className={cn(classNames.item, 'group')}
             key={page.slug}
             value={page.slug}
             onSelect={() => goto(page.slug)}
           >
             <Inline space={4} alignY="center">
               {page.title}
               <Split />
-              <Hotkey letter="D" />
+              <Hotkey letter="D" className="hidden group-aria-selected:block" />
             </Inline>
           </Command.Item>
           {subPage === page.slug && (

diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { siteConfig } from '@/lib/config';
-import { Button, Dialog, useClassNames } from '@/ui';
+import { Button, Dialog, cn, useClassNames } from '@/ui';
 import { Command, useCommandState } from 'cmdk';
 import { allContentPages } from 'contentlayer/generated';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
@@ -45,15 +45,16 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => {
 
 interface HotKeyProps {
   letter: string;
+  className?: string;
 }
-export const Hotkey = ({ letter }: HotKeyProps) => {
+export const Hotkey = ({ letter, className }: HotKeyProps) => {
   const mounted = useHasMounted();
   if (!mounted) {
     return null;
   }
   const isMacOS = window.navigator.userAgent.includes('Mac OS');
   return (
-    <span className="opacity-50">
+    <span className={cn('opacity-50', className)}>
       ({isMacOS ? '⌘' : 'Ctrl+'}
       {letter})
     </span>