<span className={cn(
                                "px-2 py-1",
                                "text-xs",
                                "text-black/50",
                                "bg-white/70",
                                "rounded-sm rounded-tr-none rounded-br-none",
                            )}>{"(at a minimum!)"}</span>

Code Style Guide

General

• Follow best practices for React, TypeScript, and modern JavaScript.

• Prefer functional components and hooks.

CSS & Tailwind

• When writing CSS or Tailwind code, use the cn helper function from src/lib/utils.ts if there are multiple or conditional classNames for an HTML element.

• Do not concatenate className strings manually or use template literals for className props when there are many classes or conditions.

• Example:

  // Good:
  <div className={cn('bg-red-500', isActive && 'font-bold', className)} />
  
  // Avoid:
  <div className={isActive ? 'bg-red-500 font-bold' : 'bg-red-500'} />
  <div className={`bg-red-500 ${isActive ? 'font-bold' : ''} ${className}`} />
  

• The cn helper combines clsx and tailwind-merge for best-in-class className merging and deduplication.

Imports

• Use absolute imports from the src directory (e.g., @/components/Chip).

Other

• Add more rules as the codebase evolves.