Update KeyboardShortcutPills.tsx

This commit is contained in:
Nate Kelley 2025-03-12 12:36:01 -06:00
parent bffe175bed
commit 7410a0c07b
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
1 changed files with 8 additions and 1 deletions

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { cn } from '@/lib/classMerge';
export const KeyboardShortcutPill: React.FC<{ export const KeyboardShortcutPill: React.FC<{
shortcut?: string[]; shortcut?: string[];
@ -18,8 +19,14 @@ export const KeyboardShortcutPill: React.FC<{
KeyboardShortcutPill.displayName = 'KeyboardShortcutPill'; KeyboardShortcutPill.displayName = 'KeyboardShortcutPill';
const TooltipShortcut: React.FC<{ shortcut: string }> = ({ shortcut }) => { const TooltipShortcut: React.FC<{ shortcut: string }> = ({ shortcut }) => {
const numberOfChars = shortcut.length;
return ( return (
<div className="border-border bg-background text2xs pointer-events-none relative flex h-5 w-[1.375rem] items-center justify-center rounded border-[0.5px] px-[1.5px] leading-none shadow"> <div
className={cn(
'border-border bg-background text2xs pointer-events-none relative flex h-5 items-center justify-center rounded border-[0.5px] px-[1.5px] leading-none shadow',
numberOfChars === 1 ? 'w-[1.375rem]' : 'px-1'
)}>
{shortcut} {shortcut}
</div> </div>
); );