# Grid Layout Patterns

## Responsive Grid

```tsx
// Standard
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  {items.map(item => <EntityCard key={item.id} {...mapToCardProps(item)} />)}
</div>

// With empty state
{items.length === 0 ? (
  <div className="text-center py-12"><p>No items</p></div>
) : (
  <div className="grid ...">...</div>
)}
```

## Detail Page Template

### Structure
```tsx
<div className="container mx-auto px-4 py-6 max-w-7xl space-y-6">
  {/* Header */}
  <div className="flex items-center gap-4">
    <button onClick={() => navigate(-1)} className="p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)]">
      <ArrowLeft className="w-5 h-5 text-[var(--text-secondary)]" />
    </button>
    <div className="flex-1">
      <h1 className="text-xl sm:text-2xl font-bold text-[var(--text-primary)]">{title}</h1>
      <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>
    </div>
    <div className="flex items-center gap-2">
      {/* Status badges */}
    </div>
  </div>

  {/* Pill Tabs */}
  <div className="flex gap-1 p-1 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]">
    {tabs.map(tab => (
      <button
        key={tab.id}
        className={`px-4 py-2 rounded-[var(--radius-button)] font-medium ${
          activeTab === tab.id
            ? 'bg-[var(--color-accent-600)] text-white'
            : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]'
        }`}
      >
        {tab.label}
      </button>
    ))}
  </div>

  {/* Tab Content */}
  <div className="min-h-[400px]">{/* ... */}</div>
</div>
```

### Info Card Pattern
```tsx
<div className="p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]">
  <div className="flex items-center justify-between mb-4">
    <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center gap-2">
      <Icon className="w-5 h-5" />
      {title}
    </h3>
    <button className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
      <Edit3 className="w-4 h-4" />
      {t('common:edit')}
    </button>
  </div>
  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <div className="p-3 rounded-lg bg-[var(--bg-secondary)]">
      <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wider mb-1">{label}</p>
      <p className="text-sm text-[var(--text-primary)] font-medium">{value}</p>
    </div>
  </div>
</div>
```

### Error Display Pattern
```tsx
{error && (
  <div className="p-4 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)]">
    <div className="flex items-center gap-2 text-[var(--error-text)]">
      <AlertTriangle className="w-5 h-5" />
      <span>{error}</span>
    </div>
  </div>
)}
```
