konnosDashboard
SingleStat.tsx79 lines · main
1// @ts-nocheck
2import Link from 'next/link'
3import type { ReactNode } from 'react'
4import { cn } from 'ui'
5
6import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
7import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
8import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
9
10type SingleStatProps = {
11 icon: ReactNode
12 label: ReactNode
13 value: ReactNode
14 className?: string
15 href?: string
16 onClick?: () => void
17 trackingProperties?: {
18 stat_type: 'migrations' | 'backups' | 'branches'
19 stat_value: number
20 }
21}
22
23export const SingleStat = ({
24 icon,
25 label,
26 value,
27 className,
28 href,
29 onClick,
30 trackingProperties,
31}: SingleStatProps) => {
32 const { mutate: sendEvent } = useSendEventMutation()
33 const { data: project } = useSelectedProjectQuery()
34 const { data: organization } = useSelectedOrganizationQuery()
35
36 const trackActivityStat = () => {
37 if (trackingProperties && project?.ref && organization?.slug) {
38 sendEvent({
39 action: 'home_activity_stat_clicked',
40 properties: trackingProperties,
41 groups: {
42 project: project.ref,
43 organization: organization.slug,
44 },
45 })
46 }
47 }
48 const content = (
49 <div className={cn('group flex items-center gap-4 p-0 text-base justify-start', className)}>
50 <div className="min-w-16 w-16 h-16 rounded-md bg-surface-75 group-hover:bg-muted border flex items-center justify-center">
51 {icon}
52 </div>
53 <div className="truncate">
54 <div className="text-left heading-meta text-foreground-light">{label}</div>
55 <div className="text-foreground truncate h-[34px] flex items-center capitalize-sentence">
56 {value}
57 </div>
58 </div>
59 </div>
60 )
61
62 if (href) {
63 return (
64 <Link className="group block" href={href} onClick={trackActivityStat}>
65 {content}
66 </Link>
67 )
68 }
69
70 if (onClick) {
71 return (
72 <button className="group" onClick={onClick}>
73 {content}
74 </button>
75 )
76 }
77
78 return content
79}