KeyboardModeButton.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { cn } from '@/lib/utils'
   3  import { useKeyboardNavigation } from '@/providers/KeyboardNavigationProvider'
   4  import { Keyboard } from 'lucide-react'
   5  import { useTranslation } from 'react-i18next'
   6  
   7  export default function KeyboardModeButton({ collapse }: { collapse: boolean }) {
   8    const { t } = useTranslation()
   9    const { isEnabled, toggleKeyboardMode } = useKeyboardNavigation()
  10  
  11    return (
  12      <Button
  13        className={cn(
  14          'flex shadow-none items-center transition-colors duration-500 bg-transparent m-0 rounded-lg gap-2 text-sm font-semibold',
  15          collapse
  16            ? 'w-12 h-12 p-3 [&_svg]:size-full'
  17            : 'justify-start w-full h-auto py-2 px-3 [&_svg]:size-5',
  18          isEnabled && 'text-primary hover:text-primary bg-primary/10 hover:bg-primary/10'
  19        )}
  20        variant="ghost"
  21        title={t('Toggle keyboard navigation (⇧K)')}
  22        onClick={toggleKeyboardMode}
  23      >
  24        <Keyboard />
  25        {!collapse && (
  26          <div className="flex items-center gap-2">
  27            <span>{t('Keyboard')}</span>
  28            <kbd className="text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground border">⇧K</kbd>
  29          </div>
  30        )}
  31        {collapse && (
  32          <span className="sr-only">{t('Toggle keyboard navigation')}</span>
  33        )}
  34      </Button>
  35    )
  36  }
  37