konnosDashboard
ReportBlockContainer.tsx85 lines · main
1import { Code, GripHorizontal } from 'lucide-react'
2import { DragEvent, PropsWithChildren, ReactNode } from 'react'
3import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
4
5interface ReportBlockContainerProps {
6 icon?: ReactNode
7 label: string
8 badge?: ReactNode
9 actions: ReactNode
10 loading?: boolean
11 draggable?: boolean
12 showDragHandle?: boolean
13 tooltip?: ReactNode
14 onDragStart?: (e: DragEvent) => void
15}
16
17export const ReportBlockContainer = ({
18 icon,
19 label,
20 badge,
21 actions,
22 loading = false,
23 draggable = false,
24 showDragHandle = false,
25 tooltip,
26 onDragStart,
27 children,
28}: PropsWithChildren<ReportBlockContainerProps>) => {
29 const hasChildren = Array.isArray(children)
30 ? children.filter(Boolean).filter((x) => !!x.props.children).length > 0
31 : !!children
32
33 return (
34 <div
35 draggable={draggable}
36 unselectable={draggable ? 'on' : undefined}
37 onDragStart={onDragStart}
38 className="h-full flex flex-col overflow-hidden bg-surface-100 border-overlay relative rounded-sm border shadow-xs"
39 >
40 <Tooltip>
41 <TooltipTrigger asChild>
42 <div
43 className={cn(
44 'grid-item-drag-handle flex py-1 pl-3 pr-1 items-center gap-2 z-10 shrink-0 group h-9',
45 draggable && 'cursor-move'
46 )}
47 >
48 {showDragHandle ? (
49 <GripHorizontal size={16} strokeWidth={1.5} />
50 ) : icon ? (
51 icon
52 ) : (
53 <Code size={16} strokeWidth={1.5} className="text-foreground-muted" />
54 )}
55 <div className={cn('flex items-center gap-2 flex-1 min-w-0 transition-opacity')}>
56 <h3 className="heading-meta truncate">{label}</h3>
57 {badge && <div className="flex items-center shrink-0">{badge}</div>}
58 </div>
59 <div className="flex items-center shrink-0">{actions}</div>
60 </div>
61 </TooltipTrigger>
62 {tooltip && (
63 <TooltipContent asChild side="bottom">
64 {tooltip}
65 </TooltipContent>
66 )}
67 </Tooltip>
68 <div
69 className={cn(
70 'relative flex flex-col grow w-full',
71 hasChildren && 'border-t overflow-hidden'
72 )}
73 >
74 <div
75 className={cn(
76 'flex flex-col grow items-center overflow-hidden',
77 loading && 'pointer-events-none'
78 )}
79 >
80 {children}
81 </div>
82 </div>
83 </div>
84 )
85}