konnosDashboard
ConnectionParameters.tsx89 lines · main
1import { Check, ChevronRight, Copy } from 'lucide-react'
2import { useState } from 'react'
3import {
4 Button,
5 cn,
6 Collapsible,
7 CollapsibleContent,
8 CollapsibleTrigger,
9 copyToClipboard,
10 Separator,
11} from 'ui'
12
13interface Parameter {
14 key: string
15 value: string
16}
17
18interface ConnectionParametersProps {
19 parameters: Parameter[]
20}
21
22export const ConnectionParameters = ({ parameters }: ConnectionParametersProps) => {
23 const [isOpen, setIsOpen] = useState(false)
24 const [copiedMap, setCopiedMap] = useState<Record<string, boolean>>({})
25
26 return (
27 <Collapsible open={isOpen} onOpenChange={setIsOpen} className="group -space-y-px">
28 <CollapsibleTrigger
29 asChild
30 className="w-full justify-start rounded-t-none !last:rounded-b group-data-open:rounded-b-none px-3"
31 >
32 <Button
33 type="default"
34 size="tiny"
35 className="text-foreground-lighter bg-dash-sidebar!"
36 icon={
37 <ChevronRight
38 className={cn(
39 'text-foreground-muted transition-transform',
40 isOpen ? 'rotate-90' : ''
41 )}
42 />
43 }
44 >
45 View parameters
46 </Button>
47 </CollapsibleTrigger>
48 <CollapsibleContent className="bg-dash-sidebar rounded-b border font-mono text-sm">
49 <div className="px-4 py-2">
50 {parameters.map((param) => (
51 <div key={param.key} className="py-0.5 group/param">
52 <div className="text-xs flex items-center">
53 <span className="text-foreground-lighter">{param.key}: </span>
54 <span className="ml-1 text-foreground">{param.value}</span>
55 <button
56 onClick={() => {
57 copyToClipboard(param.value, () => {
58 setCopiedMap((prev) => ({ ...prev, [param.key]: true }))
59 setTimeout(() => {
60 setCopiedMap((prev) => ({ ...prev, [param.key]: false }))
61 }, 1000)
62 })
63 }}
64 className={cn(
65 'text-foreground-lighter',
66 'ml-2 opacity-0 group-hover/param:opacity-100',
67 'hover:text-foreground rounded-xs p-1',
68 copiedMap[param.key] && 'opacity-100',
69 'transition-all'
70 )}
71 >
72 {copiedMap[param.key] ? (
73 <Check size={12} strokeWidth={1.5} />
74 ) : (
75 <Copy size={12} strokeWidth={1.5} />
76 )}
77 </button>
78 </div>
79 </div>
80 ))}
81 </div>
82 <Separator />
83 <div className="text-foreground-muted text-xs px-4 py-1 font-sans">
84 For security reasons, your database password is never shown.
85 </div>
86 </CollapsibleContent>
87 </Collapsible>
88 )
89}