Create a Reusable Empty State Component

[mahid797]

Develop a global reusable component for empty states that can be used across multiple pages, starting with the Contacts Page for the MVP. This component will display a central message, an optional icon/logo, and an optional button. It will serve as a placeholder for "No Data" scenarios.

---

Tasks

Component Development

• Create a reusable EmptyState component with the following props:
  • message (required): A string to display as the central message.
  • icon (optional): A React component or MUI Icon to display above the message.
  • buttonText (optional): Text to display on an optional button.
  • buttonAction (optional): A function or URL for the button action.
  • children (optional): Custom JSX elements for more complex empty states (e.g., multiple buttons or additional text).

Component Behavior

• The EmptyState component should:
  • Render the provided message in a visually prominent way.
  • Display the icon or logo above the message if provided.
  • Include a button below the message if buttonText and buttonAction are provided.
  • Render any children passed to it below the message, replacing the button if present.

Styling

• Center-align the message, icon, and button within the container.
• Use globalTheme for styling consistency (e.g., typography, spacing, and colors).
• Ensure the component is responsive across tablet and desktop resolutions.

Implementation Guidelines

• The parent component will handle the condition for displaying the empty state (e.g., passing a Boolean or checking data length). For example:

  {!data.length && <EmptyState message="No contacts found." icon={ContactsIcon} />}

• Add an example implementation for the Contacts Page.
  • Follow the design created in Contacts page needs a placeholder when there are no contacts present #156

Testing

• Manually test the component to ensure:
  • It displays correctly with all props provided.
  • It functions without optional props (e.g., no button or icon).
  • It renders properly when custom children are passed.

---

Deliverables

• A reusable EmptyState component integrated into the Contacts Page.
• Example usage documentation or inline comments for implementing the component on other pages.

---

Notes

• Refer to issue Contacts page needs a placeholder when there are no contacts present #156 for the empty state design for the Contacts Page.
• Props like message are required, while icon, buttonText, buttonAction, and children are optional.