konnosCommandOption.tsx45 lines · main
| 1 | import { Command } from 'lucide-react' |
| 2 | import { ReactNode } from 'react' |
| 3 | import { cn } from 'ui' |
| 4 | |
| 5 | import { detectOS } from '@/lib/helpers' |
| 6 | |
| 7 | interface CommandOptionProps { |
| 8 | icon: ReactNode |
| 9 | label: string |
| 10 | shortcut: string |
| 11 | onClick: () => void |
| 12 | } |
| 13 | |
| 14 | export const CommandOption = ({ icon, label, shortcut, onClick }: CommandOptionProps) => { |
| 15 | const os = detectOS() |
| 16 | |
| 17 | return ( |
| 18 | <div |
| 19 | className="px-2 py-1 transition hover:bg-surface-100 flex items-center justify-between rounded-sm cursor-pointer" |
| 20 | onClick={onClick} |
| 21 | > |
| 22 | <div className="flex items-center gap-x-2"> |
| 23 | {icon} |
| 24 | <p className="text-sm">{label}</p> |
| 25 | </div> |
| 26 | <div |
| 27 | className={cn( |
| 28 | 'flex items-center gap-1', |
| 29 | 'h-6 py-1.5 px-2 leading-none', |
| 30 | 'bg-surface-100 text-foreground-lighter', |
| 31 | 'border border-default rounded-md', |
| 32 | 'shadow-xs shadow-background-surface-100' |
| 33 | )} |
| 34 | > |
| 35 | {/* Issue with `os` and hydration fail */} |
| 36 | {os === 'macos' || true ? ( |
| 37 | <Command size={11.5} strokeWidth={1.5} /> |
| 38 | ) : ( |
| 39 | <p className="text-xs">CTRL</p> |
| 40 | )} |
| 41 | <p className="text-xs font-mono">{shortcut}</p> |
| 42 | </div> |
| 43 | </div> |
| 44 | ) |
| 45 | } |