EvoFirewall/apps/web/src/components/data-grid-cell.tsx

import type { ReactNode } from 'react'

import { cn } from '@evofw/ui/lib/utils'

const ACCENT_CLASS = {
  primary: 'font-medium text-primary',
  default: 'font-medium text-foreground',
  mono: 'font-mono text-sm text-primary',
} as const

export function DataGridPrimaryCell({
  title,
  subtitle,
  accent = 'default',
  className,
}: {
  title: ReactNode
  subtitle?: ReactNode
  accent?: keyof typeof ACCENT_CLASS
  className?: string
}) {
  return (
    <div className={cn('flex min-w-0 flex-col gap-0.5', className)}>
      <span className={cn('truncate', ACCENT_CLASS[accent])}>{title}</span>
      {subtitle ? (
        <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
      ) : null}
    </div>
  )
}

export function DataGridMutedCell({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return (
    <span
      className={cn('whitespace-nowrap text-xs text-muted-foreground', className)}
    >
      {children}
    </span>
  )
}