1
- import { type JSX , useState } from ' react'
2
- import { twMerge } from ' tailwind-merge'
3
- import type { VariantProps } from ' tailwind-variants'
4
- import { badgeCVA , typeColors , typeIcons } from ' @/components/design'
5
- import type { CommentTableRow } from ' @/entrypoints/background'
1
+ import { type JSX , useState } from " react"
2
+ import { twMerge } from " tailwind-merge"
3
+ import type { VariantProps } from " tailwind-variants"
4
+ import { badgeCVA , typeColors , typeIcons } from " @/components/design"
5
+ import type { CommentTableRow } from " @/entrypoints/background"
6
6
7
- import { CodePreview } from ' ./BadgePopups/CodePreview'
8
- import { ImagePreview } from ' ./BadgePopups/ImagePreview'
9
- import { LinkPreview } from ' ./BadgePopups/LinkPreview'
10
- import { OpenTabPopup } from ' ./BadgePopups/OpenTabPopup'
11
- import { TextPreview } from ' ./BadgePopups/TextPreview'
12
- import { TimePreview } from ' ./BadgePopups/TimePreview'
7
+ import { CodePreview } from " ./BadgePopups/CodePreview"
8
+ import { ImagePreview } from " ./BadgePopups/ImagePreview"
9
+ import { LinkPreview } from " ./BadgePopups/LinkPreview"
10
+ import { OpenTabPopup } from " ./BadgePopups/OpenTabPopup"
11
+ import { TextPreview } from " ./BadgePopups/TextPreview"
12
+ import { TimePreview } from " ./BadgePopups/TimePreview"
13
13
14
14
const typePopups = {
15
15
code : CodePreview ,
@@ -18,7 +18,9 @@ const typePopups = {
18
18
open : OpenTabPopup ,
19
19
text : TextPreview ,
20
20
time : TimePreview ,
21
- } satisfies Partial < Record < keyof typeof typeIcons , ( props : BadgePopupProps ) => JSX . Element > >
21
+ } satisfies Partial <
22
+ Record < keyof typeof typeIcons , ( props : BadgePopupProps ) => JSX . Element >
23
+ >
22
24
23
25
export interface BadgePopupProps {
24
26
row : CommentTableRow
@@ -34,11 +36,13 @@ const Badge = ({ text, type, data }: BadgeProps) => {
34
36
const Icon = typeIcons [ type ]
35
37
const [ showTooltip , setShowTooltip ] = useState ( false )
36
38
const PopupComponent =
37
- showTooltip && type in typePopups && typePopups [ type as keyof typeof typePopups ]
39
+ showTooltip &&
40
+ type in typePopups &&
41
+ typePopups [ type as keyof typeof typePopups ]
38
42
return (
39
43
< button
40
- type = ' button'
41
- className = ' relative'
44
+ type = " button"
45
+ className = " relative"
42
46
onMouseEnter = { ( ) => setShowTooltip ( true ) }
43
47
onMouseLeave = { ( ) => setShowTooltip ( false ) }
44
48
>
@@ -47,17 +51,17 @@ const Badge = ({ text, type, data }: BadgeProps) => {
47
51
badgeCVA ( {
48
52
clickable : type in typePopups ,
49
53
type,
50
- } ) ,
54
+ } )
51
55
) }
52
56
>
53
- { type === ' blank' || < Icon className = ' h-3 w-3' /> }
57
+ { type === " blank" || < Icon className = " h-3 w-3" /> }
54
58
{ text || type }
55
59
</ span >
56
60
{ PopupComponent && data && (
57
61
< div
58
62
className = { twMerge (
59
- ' absolute top-full z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg' ,
60
- typeColors [ type ] ,
63
+ " absolute top-full z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg" ,
64
+ typeColors [ type ]
61
65
) }
62
66
>
63
67
< PopupComponent row = { data } />
0 commit comments