index.tsx raw

   1  import { cn } from '@/lib/utils'
   2  import { TActionType, useKeyboardNavigation } from '@/providers/KeyboardNavigationProvider'
   3  import { MessageSquare, Repeat2, Quote, Heart, Zap } from 'lucide-react'
   4  
   5  const ACTIONS: { type: TActionType; icon: typeof MessageSquare; label: string }[] = [
   6    { type: 'reply', icon: MessageSquare, label: 'Reply' },
   7    { type: 'repost', icon: Repeat2, label: 'Repost' },
   8    { type: 'quote', icon: Quote, label: 'Quote' },
   9    { type: 'react', icon: Heart, label: 'React' },
  10    { type: 'zap', icon: Zap, label: 'Zap' }
  11  ]
  12  
  13  export default function ActionModeOverlay() {
  14    const { actionMode, isEnabled } = useKeyboardNavigation()
  15  
  16    if (!isEnabled || !actionMode.active) return null
  17  
  18    return (
  19      <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 pointer-events-none">
  20        <div className="flex gap-1 bg-background/95 backdrop-blur-sm border rounded-full px-3 py-2 shadow-lg">
  21          {ACTIONS.map(({ type, icon: Icon, label }) => (
  22            <div
  23              key={type}
  24              className={cn(
  25                'flex flex-col items-center gap-1 p-2 rounded-full transition-all duration-150',
  26                actionMode.selectedAction === type
  27                  ? 'bg-primary text-primary-foreground scale-110'
  28                  : 'text-muted-foreground'
  29              )}
  30              title={label}
  31            >
  32              <Icon className="size-5" />
  33            </div>
  34          ))}
  35        </div>
  36        <div className="text-center text-xs text-muted-foreground mt-2">
  37          Tab to cycle, Enter to activate, Esc to cancel
  38        </div>
  39      </div>
  40    )
  41  }
  42