konnosDashboard
CommandRender.tsx55 lines · main
1import { Check, Copy } from 'lucide-react'
2import { forwardRef, useState } from 'react'
3import { cn, copyToClipboard } from 'ui'
4
5const CommandRender = forwardRef<HTMLDivElement, { commands: any[]; className?: string }>(
6 ({ commands, className }, ref) => {
7 return (
8 <div ref={ref} className={cn('space-y-4', className)}>
9 {commands.map((item: any, idx: number) => (
10 <Command key={`command-${idx}`} item={item} />
11 ))}
12 </div>
13 )
14 }
15)
16
17CommandRender.displayName = 'CommandRender'
18
19export default CommandRender
20
21const Command = ({ item }: any) => {
22 const [isCopied, setIsCopied] = useState(false)
23
24 return (
25 <div className="space-y-1">
26 <span className="font-mono text-sm text-foreground-lighter">{`> ${item.comment}`}</span>
27 <div className="flex items-center gap-2">
28 <div className="flex gap-2 font-mono text-sm font-normal text-foreground">
29 <span className="text-foreground-lighter">$</span>
30 <span>
31 <span>{item.jsx ? item.jsx() : null} </span>
32 <button
33 type="button"
34 className="text-foreground-lighter hover:text-foreground"
35 onClick={() => {
36 function onCopy(value: any) {
37 setIsCopied(true)
38 copyToClipboard(value)
39 setTimeout(() => setIsCopied(false), 3000)
40 }
41 onCopy(item.command)
42 }}
43 >
44 {isCopied ? (
45 <Check size={14} strokeWidth={3} className="text-brand" />
46 ) : (
47 <Copy size={14} />
48 )}
49 </button>
50 </span>
51 </div>
52 </div>
53 </div>
54 )
55}