konnosDashboard
index.tsx115 lines · main
1'use client'
2
3import { ChevronRight } from 'lucide-react'
4import { useTheme } from 'next-themes'
5import * as React from 'react'
6import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
7
8interface Props {
9 title?: string
10 tooltip?: string
11
12 icon?: string | React.ReactNode
13 iconSize?: 'sm' | 'lg'
14 children?: React.ReactNode
15
16 background?: boolean
17
18 hasLightIcon?: boolean
19
20 showLink?: boolean
21}
22
23export const IconPanel = ({
24 title,
25 tooltip,
26 icon,
27 iconSize = 'sm',
28 children,
29 background = true,
30 hasLightIcon,
31 showLink = false,
32}: Props) => {
33 const { theme } = useTheme()
34
35 const IconContainer: React.FC<React.PropsWithChildren> = (props) => {
36 return (
37 <div
38 className={[
39 'relative',
40 'flex items-center justify-center shrink-0',
41 iconSize === 'lg' ? 'h-16 w-16 rounded-lg' : 'h-10 w-10 rounded-lg',
42 'group',
43 'cursor-pointer',
44 'overflow-hidden',
45 'border rounded-full',
46 background
47 ? 'hover:border-strong bg-surface-100'
48 : 'border-muted hover:border-default bg-transparent',
49 'transition',
50 ].join(' ')}
51 >
52 {props.children}
53 </div>
54 )
55 }
56
57 return (
58 <Tooltip>
59 <TooltipTrigger asChild>
60 <div className={['relative', 'group'].join(' ')} data-tip={tooltip}>
61 <div className={['peer relative', 'flex flex-col', icon ? 'gap-6' : 'gap-2'].join(' ')}>
62 <div
63 className={[
64 'flex',
65 children ? 'items-start' : 'items-center',
66 (title || showLink) && 'gap-3',
67 ].join(' ')}
68 >
69 {typeof icon === 'string' ? (
70 <IconContainer>
71 <img
72 className={iconSize === 'lg' ? 'w-8' : 'w-5'}
73 src={`${icon}${hasLightIcon && theme !== 'dark' ? '-light' : ''}.svg`}
74 alt={
75 title !== undefined
76 ? `${title} Icon`
77 : tooltip !== undefined
78 ? `${tooltip} Icon`
79 : 'Icon'
80 }
81 />
82 </IconContainer>
83 ) : (
84 <IconContainer>{icon}</IconContainer>
85 )}
86 <div className="flex flex-col gap-1">
87 <div className="flex items-center gap-3">
88 {title && <h5 className="text-base text-foreground m-0">{title}</h5>}
89 </div>
90 {children && (
91 <span className="text-sm text-foreground-light not-prose">{children}</span>
92 )}
93 {showLink && (
94 <span className="text-brand-link justify-end text-sm">Learn more</span>
95 )}
96 </div>
97 </div>
98 </div>
99 <div
100 className="
101 absolute transition-all ease-in
102 -z-10 -inset-3 rounded-2xl
103 bg-surface-100 opacity-0 peer-hover:opacity-100"
104 ></div>
105 </div>
106 </TooltipTrigger>
107
108 {tooltip && (
109 <TooltipContent side="top" className="">
110 {tooltip}
111 </TooltipContent>
112 )}
113 </Tooltip>
114 )
115}