konnosDashboard
index.tsx46 lines · main
1import { components } from 'api-types'
2import type { HTMLAttributes, ReactNode } from 'react'
3import { cn } from 'ui'
4
5interface ComputeBadgeProps extends HTMLAttributes<HTMLDivElement> {
6 infraComputeSize:
7 | components['schemas']['ProjectDetailResponse']['infra_compute_size']
8 | '>16XL'
9 | undefined
10 icon?: ReactNode
11}
12
13export function ComputeBadge({ infraComputeSize, className, icon, ...props }: ComputeBadgeProps) {
14 const smallCompute =
15 infraComputeSize?.toLocaleLowerCase() === 'micro' ||
16 infraComputeSize?.toLocaleLowerCase() === 'nano'
17
18 const hasComputeSize = !!infraComputeSize
19
20 return (
21 <div
22 className={cn(
23 // Base styles
24 'inline-flex items-center justify-center rounded-sm text-center font-mono uppercase',
25 'whitespace-nowrap font-medium tracking-[0.06em] text-[11px] leading-[1.1] px-[5.5px] py-[3px]',
26 'transition-all',
27 // Variant styles
28 !hasComputeSize
29 ? 'bg-surface-75 group-data-[state=open]:bg-surface-75/20 text-foreground-light border border-strong'
30 : smallCompute
31 ? 'bg-surface-75/50 group-data-[state=open]:bg-surface-75/75 text-foreground-light border border-strong'
32 : 'bg-brand/10 group-data-[state=open]:bg-brand/20 text-brand-600 border border-brand-500',
33 // Hover card interaction styles
34 'group-data-[state=open]:ring-2',
35 smallCompute
36 ? 'group-data-[state=open]:ring-foreground-muted/20'
37 : 'group-data-[state=open]:ring-brand/20',
38 className
39 )}
40 {...props}
41 >
42 {infraComputeSize}
43 {icon && <span className="flex items-center">{icon}</span>}
44 </div>
45 )
46}