EmptyState Component

The EmptyState component is used to display a placeholder when there is no content to show. It provides a set of common empty state illustrations along with a customizable message.

Installation

import { EmptyState } from '@yourpackage/components';

Props

Prop	Type	Default	Description
type	string	'box'	The type of empty state illustration to display. Options: 'bookmark', 'box', 'calendar', 'search', 'heart', 'notification', 'cart'
message	string	'No results found'	The message to display under the illustration
className	string	''	Additional CSS class to apply to the component

Basic Usage

import React from 'react';
import { EmptyState } from '@yourpackage/components';

function MyComponent() {
  return (
    <div className="my-container">
      <EmptyState 
        type="search" 
        message="No search results found" 
      />
    </div>
  );
}

Examples

Default Empty State

<EmptyState />

Different Types of Empty States

// For empty bookmarks
<EmptyState 
  type="bookmark" 
  message="You haven't saved any bookmarks yet" 
/>

// For empty calendar
<EmptyState 
  type="calendar" 
  message="No events scheduled" 
/>

// For search with no results
<EmptyState 
  type="search" 
  message="No matches found for your search" 
/>

// For empty favorites/likes
<EmptyState 
  type="heart" 
  message="You haven't liked any items yet" 
/>

// For no notifications
<EmptyState 
  type="notification" 
  message="You have no new notifications" 
/>

// For empty shopping cart
<EmptyState 
  type="cart" 
  message="Your cart is empty" 
/>

// For empty box/container
<EmptyState 
  type="box" 
  message="Nothing to display" 
/>

With Custom Styling

<EmptyState 
  type="search" 
  message="No results found" 
  className="custom-empty-state large-empty-state" 
/>

CSS Customization

The component uses BEM naming convention for its CSS classes:

• .blendx-empty-state - Main container
• .blendx-empty-state__image - The illustration image
• .blendx-empty-state__message - The message text

Example of custom styling:

.blendx-empty-state {
  padding: 2rem;
  
  &__image {
    max-width: 200px;
  }
  
  &__message {
    font-size: 1.2rem;
    margin-top: 1rem;
    color: #666;
  }
}

Available Illustrations

The EmptyState component comes with 7 different built-in illustrations:

1. box - Default empty container illustration
2. bookmark - Empty bookmarks illustration
3. calendar - Empty calendar/events illustration
4. search - No search results illustration
5. heart - Empty favorites/likes illustration
6. notification - No notifications illustration
7. cart - Empty shopping cart illustration

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	6
frontend-app-dashboard	9

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/academics/program/index.jsx
• src/pages/library/documents/index.jsx
• src/pages/library/videos/index.jsx
• src/pages/program-single/courses/index.jsx
• src/pages/users/AddUsersDrawer.jsx
• src/pages/view-ticket/index.jsx

frontend-app-dashboard

• src/components/CourseTab.jsx
• src/components/Notes.jsx
• src/components/ProgramTab.jsx
• src/pages/discover/courses-discover/index.jsx
• src/pages/discover/index.jsx
• src/pages/discover/programs-discover/index.jsx
• src/pages/home/updates/UpcomingEvents.jsx
• src/pages/support/view-ticket/index.jsx
• src/pages/wishlist/index.jsx