PageHeader

PageHeader

Overview

PageHeader is a component used to display the main header section of a page, including the title and actionable items like streak counts, mail, and notifications. It enhances the user interface of dashboards or content pages by providing quick access to key metrics.

Props

Prop Name	Type	Description	Default Value
title	string	The title of the page displayed in the header.	'Title'
streakCount	number	The number of streak days to be displayed on a button.	0
mailCount	number	The count of unread mails, displayed as a badge on the mail icon button.	0
notificationCount	number	The count of unread notifications, displayed as a badge on the notification icon button.	0

Usage Example

import PageHeader from "../blendx-ui/src/PageHeader";

const DashboardPage = () => {
  return (
    <div className="dashboard-page">
      <PageHeader
        title="Dashboard"
        streakCount={5}
        mailCount={10}
        notificationCount={3}
      />
      {/* Page content goes here */}
    </div>
  );
};

export default DashboardPage;

In this example:

• The title is set to "Dashboard".
• The streakCount shows 5 days.
• The mailCount shows 10 unread mails.
• The notificationCount shows 3 notifications.

Additional Components

PageSectionHeader

PageSectionHeader is a wrapper component designed to create headers for different sections within a page. It allows you to structure your page with a section title, description, image, and action buttons.

Props

Prop Name	Type	Description	Default Value
children	node	Elements to be rendered inside the section header.	null

Usage Example

import { SectionHeader } from "../blendx-ui/src/PageHeader";

const Section = () => (
  <SectionHeader>
    <SectionHeader.Head
      imageComponent={<img src="https://via.placeholder.com/100" alt="Example" />}
      title="Section Title"
      description="This is the description for this section."
    />
    <SectionHeader.Action>
      <button>Action</button>
    </SectionHeader.Action>
  </SectionHeader>
);

SectionHeader Components

• SectionHeader.Head: A component that includes an optional image, title, and description.
• SectionHeader.Action: A component for placing actionable elements (e.g., buttons).

Props for SectionHeader.Head

Prop Name	Type	Description	Default Value
imageComponent	node	An image element to display in the header.	null
title	string	The section title text.	''
description	string	A description text for the section.	''

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	1
frontend-app-course-authoring	1
frontend-app-discussions	1
frontend-app-account	1
frontend-app-learning	1
frontend-app-profile	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/library/index.jsx

frontend-app-course-authoring

• src/layouts/DashboardIndex.jsx

frontend-app-discussions

• src/layouts/DashboardIndex.jsx

frontend-app-account

• src/layouts/DashboardIndex.jsx

frontend-app-learning

• src/tab-page/TabPage.jsx

frontend-app-profile

• src/layouts/ProfileLayout.jsx