Create reusable EmptyState component

[fergusfinn]

Description

Create a reusable EmptyState component to ensure consistency across empty states throughout the app.

Problem

Inconsistent empty states:

Models.tsx (lines 454-480):

• Icon container: w-20 h-20
• Icon size: w-10 h-10
• Heading: text-xl font-semibold

ApiKeys.tsx (lines 256-282):

• Icon container: w-16 h-16
• Icon size: w-8 h-8
• Heading: text-lg font-medium

Issues:

• Different sizes and styles across pages
• Code duplication
• Hard to maintain consistent UX

Solution

Create reusable component:

// dashboard/src/components/ui/empty-state.tsx
interface EmptyStateProps {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description: string;
  action?: {
    label: string;
    onClick: () => void;
  };
}

export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
  return (
    <div className="text-center py-12">
      <div className="p-4 bg-doubleword-neutral-100 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
        <Icon className="w-8 h-8 text-doubleword-neutral-600" />
      </div>
      <h3 className="text-lg font-medium text-doubleword-neutral-900 mb-2">
        {title}
      </h3>
      <p className="text-doubleword-neutral-600 mb-6 max-w-md mx-auto">
        {description}
      </p>
      {action && (
        <Button onClick={action.onClick} className="bg-doubleword-background-dark hover:bg-doubleword-neutral-900">
          <Plus className="w-4 h-4 mr-2" />
          {action.label}
        </Button>
      )}
    </div>
  );
}

Usage:

<EmptyState
  icon={BarChart3}
  title="No models available yet"
  description="Models are automatically synced when you add an inference endpoint."
  action={{
    label: "Add Endpoint",
    onClick: () => navigate("/endpoints", { state: { openCreateModal: true } })
  }}
/>

Files to Create

• dashboard/src/components/ui/empty-state.tsx

Files to Update

• dashboard/src/components/features/models/Models/Models.tsx
• dashboard/src/components/features/api-keys/ApiKeys/ApiKeys.tsx
• Any other components with empty states

Benefits

• Consistent UX across the app
• Less code duplication
• Single place to update empty state styling
• Easier to add new empty states

Status

⏳ Pending