EmptyStates

'use client'
import { useState } from 'react'

const STATES = [
  {
    id: 'no-results', icon: '🔍', title: 'No results found',
    body: 'Try adjusting your search or filters to find what you're looking for.',
    action: 'Clear filters', secondary: null,
  },
  {
    id: 'error', icon: '⚠️', title: 'Something went wrong',
    body: 'We're having trouble loading this page. Please try again.',
    action: 'Try again', secondary: 'Contact support',
  },
  {
    id: 'offline', icon: '📡', title: 'You're offline',
    body: 'Check your internet connection and try refreshing the page.',
    action: 'Refresh page', secondary: null,
  },
  {
    id: 'permission', icon: '🔒', title: 'Access restricted',
    body: 'You need a Pro subscription to access this feature.',
    action: 'Upgrade to Pro', secondary: 'Learn more',
  },
  {
    id: 'empty', icon: '📦', title: 'No components yet',
    body: 'Start by exploring the catalogue or generating your first component with MCP.',
    action: 'Browse catalogue', secondary: 'Setup MCP',
  },
]

export default function EmptyStates() {
  const [active, setActive] = useState('no-results')
  const state = STATES.find(s => s.id === active)!

  return (
    <div style={{ background: '#0A0A0A', padding: 32, display: 'flex', flexDirection: 'column', alignItems: 'center', minHeight: 360, justifyContent: 'center' }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 40, flexWrap: 'wrap', justifyContent: 'center' }}>
        {STATES.map(s => (
          <button key={s.id} onClick={() => setActive(s.id)} style={{ background: active === s.id ? 'rgba(201,168,76,0.1)' : 'rgba(255,255,255,0.04)', border: '1px solid', borderColor: active === s.id ? 'rgba(201,168,76,0.3)' : 'rgba(255,255,255,0.08)', color: active === s.id ? '#C9A84C' : 'rgba(255,255,255,0.4)', borderRadius: 6, padding: '6px 12px', cursor: 'pointer', fontSize: 12 }}>
            {s.id}
          </button>
        ))}
      </div>

      <div key={active} style={{ textAlign: 'center', maxWidth: 320, animation: 'fadeUp 0.3s ease' }}>
        <div style={{ fontSize: 56, marginBottom: 20 }}>{state.icon}</div>
        <div style={{ color: '#F5F5F0', fontSize: 20, fontWeight: 700, marginBottom: 12 }}>{state.title}</div>
        <div style={{ color: 'rgba(255,255,255,0.45)', fontSize: 14, lineHeight: 1.6, marginBottom: 28 }}>{state.body}</div>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button style={{ background: '#C9A84C', color: '#0A0A0A', border: 'none', borderRadius: 8, padding: '10px 20px', cursor: 'pointer', fontWeight: 700, fontSize: 14 }}>{state.action}</button>
          {state.secondary && <button style={{ background: 'rgba(255,255,255,0.06)', color: '#F5F5F0', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, padding: '10px 20px', cursor: 'pointer', fontSize: 14 }}>{state.secondary}</button>}
        </div>
      </div>
      <style>{`@keyframes fadeUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }`}</style>
    </div>
  )
}

Component info

About

Collection of empty state patterns: no results, error, offline, permission denied, and first time