Merge pull request #132 from timlrx/enhance/kbar

Render kbar shortcut keys
timlrx · Aug 25, 2023 · 4e7a3c4 · 4e7a3c4
2 parents e290573 + b6bb8dd
commit 4e7a3c4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 32 deletions.
diff --git a/.changeset/large-geckos-allow.md b/.changeset/large-geckos-allow.md
diff --git a/.changeset/pre.json b/.changeset/pre.json
diff --git a/.changeset/soft-humans-scream.md b/.changeset/soft-humans-scream.md
diff --git a/packages/pliny/CHANGELOG.md b/packages/pliny/CHANGELOG.md
@@ -1,5 +1,19 @@
 # pliny
 
+## 0.1.2
+
+### Patch Changes
+
+- a19ed9f: upgrade kbar version
+- 79ed1c1: Expose onSearchDocumentsLoad for kbar and allow searchDocumentsPath to be false
+- 9ff4d94: render shortcut key in kbar item
+
+## 0.1.2-beta.1
+
+### Patch Changes
+
+- 9ff4d94: render shortcut key in kbar item
+
 ## 0.1.2-beta.0
 
 ### Patch Changes

diff --git a/packages/pliny/package.json b/packages/pliny/package.json
@@ -2,7 +2,7 @@
   "name": "pliny",
   "description": "Main entry point for pliny components",
   "homepage": "https://github.com/timlrx/pliny",
-  "version": "0.1.2-beta.0",
+  "version": "0.1.2",
   "type": "module",
   "exports": {
     "./*": "./*",

diff --git a/packages/pliny/src/search/KBarModal.tsx b/packages/pliny/src/search/KBarModal.tsx
@@ -34,10 +34,10 @@ export const KBarModal = ({ actions, isLoading }: { actions: Action[]; isLoading
                   />
                 </svg>
               </span>
-              <KBarSearch className="h-8 w-full bg-transparent text-slate-600 placeholder-slate-400 focus:outline-none dark:text-slate-200 dark:placeholder-slate-500" />
-              <span className="inline-block whitespace-nowrap rounded border border-slate-400/70 px-1.5 align-middle font-medium leading-4 tracking-wide text-slate-500 [font-size:10px] dark:border-slate-600 dark:text-slate-400">
+              <KBarSearch className="h-8 w-full bg-transparent text-gray-600 placeholder-gray-400 focus:outline-none dark:text-gray-200 dark:placeholder-gray-500" />
+              <kbd className="inline-block whitespace-nowrap rounded border px-1.5 align-middle font-medium leading-4 tracking-wide text-xs text-gray-400 border-gray-400">
                 ESC
-              </span>
+              </kbd>
             </div>
             {!isLoading && <RenderResults />}
             {isLoading && (
@@ -69,18 +69,34 @@ const RenderResults = () => {
               </div>
             ) : (
               <div
-                className={`block cursor-pointer px-4 py-2 ${
+                className={`flex cursor-pointer justify-between px-4 py-2 ${
                   active
                     ? 'bg-primary-600 text-gray-100'
                     : 'text-gray-700 dark:text-gray-100 bg-transparent'
                 }`}
               >
-                {item.subtitle && (
-                  <div className={`${active ? 'text-gray-200' : 'text-gray-400'} text-xs`}>
-                    {item.subtitle}
+                <div className="block">
+                  {item.subtitle && (
+                    <div className={`${active ? 'text-gray-200' : 'text-gray-400'} text-xs`}>
+                      {item.subtitle}
+                    </div>
+                  )}
+                  <div>{item.name}</div>
+                </div>
+                {item.shortcut?.length ? (
+                  <div aria-hidden className="flex flex-row items-center justify-center gap-x-2">
+                    {item.shortcut.map((sc) => (
+                      <kbd
+                        key={sc}
+                        className={`font-medium h-7 w-6 flex items-center	justify-center text-xs rounded border ${
+                          active ? 'text-gray-200 border-gray-200' : 'text-gray-400 border-gray-400'
+                        }`}
+                      >
+                        {sc}
+                      </kbd>
+                    ))}
                   </div>
-                )}
-                <div>{item.name}</div>
+                ) : null}
               </div>
             )}
           </div>