StatusPanel Component

Pure-presentation status card used as the auth and error fallback throughout the CMS shell. Two-prop contract — title plus message — with an optional tone discriminator that swaps the heading color. Consumers wrap the panel in a flex container to take over the viewport (full-screen at the layout level) or center it inside the content area (page level).

Interactive Preview

Live component with different configuration options. Switch between variants and toggle code view.

Component Examples

Select different variants to see how props affect the component behavior

Example:

Preview

Authentication Required

Your session has expired. Please log in again.

Props

Component accepts the following props for configuration and behavior.

Prop	Type	Required	Default	Description
title	string	Required	—	Heading copy. Color is driven by tone.
message	string	Required	—	Body copy. Always rendered with muted-foreground color.
tone	"info" \| "error"	Optional	"info"	Visual tone — info uses neutral foreground, error uses destructive color on the heading.

Type Definitions

StatusPanelProps

Prop contract for the StatusPanel component

interface StatusPanelProps {
  title: string
  message: string
  tone?: 'info' | 'error'
}

Usage Examples

Common patterns and implementation examples.

Layout Usage (Full-Screen Auth Fallback)

import { StatusPanel } from '@/components/shared/status-panel'

if (isAuthError) {
  return (
    <div className='flex items-center justify-center h-screen'>
      <StatusPanel
        title='Authentication Required'
        message='Your session has expired. Please log in again.'
      />
    </div>
  )
}

Page Usage (Inline Dashboard Error)

import { StatusPanel } from '@/components/shared/status-panel'

if (error) {
  return (
    <div className='flex items-center justify-center min-h-[400px]'>
      <StatusPanel
        title='Error'
        message='Unable to load dashboard. Please try refreshing the page.'
        tone='error'
      />
    </div>
  )
}