konnosDashboard
algorithm-hover-card.tsx68 lines · main
1import { ExternalLink, HelpCircle, LockKeyholeOpen, RectangleEllipsis } from 'lucide-react'
2import { HoverCard, HoverCardContent, HoverCardTrigger } from 'ui'
3
4import { AlgorithmDetail, algorithmDetails } from './algorithm-details'
5
6interface AlgorithmHoverCardProps {
7 algorithm: keyof typeof algorithmDetails
8 legacy?: boolean
9}
10
11export const AlgorithmHoverCard = ({ algorithm, legacy }: AlgorithmHoverCardProps) => {
12 const details: AlgorithmDetail = algorithmDetails[algorithm]
13
14 return (
15 <div className="flex items-center gap-x-2">
16 {algorithm === 'HS256' ? (
17 <RectangleEllipsis className="shrink-0" size={14} />
18 ) : (
19 <LockKeyholeOpen className="shrink-0" size={14} />
20 )}
21 <p>{legacy ? `Legacy ${details.label}` : details.label}</p>
22 <HoverCard closeDelay={50} openDelay={300}>
23 <HoverCardTrigger className="min-w-0">
24 <HelpCircle size={14} className="text-foreground-lighter" />
25 </HoverCardTrigger>
26 <HoverCardContent className="w-88 flex items-start gap-3" side="right" align="center">
27 <div className="flex-1">
28 <h4 className="font-semibold truncate">{details.name}</h4>
29 <div className="flex flex-col gap-2 text-sm text-foreground-light">
30 <p>{details.description}</p>
31 <p>
32 Pros:
33 <ul className="list-disc pl-6">
34 {details.pros.map((pro, i) => (
35 <li key={i}>{pro}</li>
36 ))}
37 </ul>
38 </p>
39 <p>
40 Cons:{' '}
41 <ul className="list-disc pl-6">
42 {details.cons.map((con, i) => (
43 <li key={i}>{con}</li>
44 ))}
45 </ul>
46 <br />
47 </p>
48 </div>
49 <div className="space-y-1 mt-2">
50 {details.links.map((link, index) => (
51 <a
52 key={index}
53 href={link.url}
54 target="_blank"
55 rel="noopener noreferrer"
56 className="text-xs text-brand hover:text-brand-600 flex items-center"
57 >
58 <ExternalLink className="w-3 h-3 mr-1 shrink-0" />
59 <span className="truncate">{link.label}</span>
60 </a>
61 ))}
62 </div>
63 </div>
64 </HoverCardContent>
65 </HoverCard>
66 </div>
67 )
68}