konnosDashboard
ConnectionParameters.tsx54 lines · main
1import { Check, Copy } from 'lucide-react'
2import { useState } from 'react'
3import { cn, copyToClipboard } from 'ui'
4
5interface Parameter {
6 key: string
7 value: string
8}
9
10interface ConnectionParametersProps {
11 parameters: Parameter[]
12 onCopy?: (paramKey: string) => void
13}
14
15export const ConnectionParameters = ({ parameters, onCopy }: ConnectionParametersProps) => {
16 const [copiedMap, setCopiedMap] = useState<Record<string, boolean>>({})
17
18 return (
19 <div className="bg-surface-75 rounded-lg border font-mono text-sm p-4">
20 {parameters.map((param) => (
21 <div key={param.key} className="py-0.5 group/param">
22 <div className="text-xs flex items-center">
23 <span className="text-foreground-lighter">{param.key}:</span>
24 <span className="ml-1 text-foreground">{param.value}</span>
25 <button
26 onClick={() => {
27 copyToClipboard(param.value, () => {
28 setCopiedMap((prev) => ({ ...prev, [param.key]: true }))
29 onCopy?.(param.key)
30 setTimeout(() => {
31 setCopiedMap((prev) => ({ ...prev, [param.key]: false }))
32 }, 1000)
33 })
34 }}
35 className={cn(
36 'text-foreground-lighter',
37 'ml-2 opacity-0 group-hover/param:opacity-100',
38 'hover:text-foreground rounded-xs p-1',
39 copiedMap[param.key] && 'opacity-100',
40 'transition-all'
41 )}
42 >
43 {copiedMap[param.key] ? (
44 <Check size={12} strokeWidth={1.5} />
45 ) : (
46 <Copy size={12} strokeWidth={1.5} />
47 )}
48 </button>
49 </div>
50 </div>
51 ))}
52 </div>
53 )
54}