DiscoverBanner

DiscoverBanner

Description:
The DiscoverBanner component is a customizable banner element that displays promotional or informational content with an optional image, title, description, buttons, and badge.

Usage:

import React from 'react';
import DiscoverBanner from 'blendx-ui/DiscoverBanner';

const MyBanner = () => (
  <DiscoverBanner
    title="Welcome to Our Platform"
    description="Discover amazing features and content"
    image="path/to/image.jpg"
    variant="primary"
    primaryBtn={{
      text: "Get Started",
      url: "https://example.com/start"
    }}
    badgeText="New"
  />
);

export default MyBanner;

Props:

• image (string, required): The URL of the image to display in the banner.
• title (string, required): The main heading text of the banner.
• description (string, required): The descriptive text below the title.
• variant (string, required): The style variant of the banner (affects background and button styles).
• primaryBtn (object): Configuration for the primary button.
  • text (string, required): The text to display on the button.
  • url (string, required): The URL to open when clicked.
• secondaryBtn (object): Configuration for the secondary button.
  • text (string, required): The text to display on the button.
  • url (string, required): The URL to open when clicked.
• badgeText (string): Text to display in the badge next to the title.
• className (string): Additional CSS class names.
• loading (bool): Shows a loading state when true. in this state only the backgound will be shown just the color and no text

Example:

<DiscoverBanner
  image="/path/to/banner-image.jpg"
  title="Summer Course Special"
  description="Enroll now and get 20% off on all courses"
  variant="primary"
  primaryBtn={{
    text: "Enroll Now",
    url: "https://example.com/enroll"
  }}
  secondaryBtn={{
    text: "Learn More",
    url: "https://example.com/learn-more"
  }}
  badgeText="Limited Time"
  className="custom-banner"
/>

Loading State:

The component includes a loading state that can be triggered by setting the loading prop to true:

<DiscoverBanner
  loading={true}
  variant="primary"
/>

Default Props:

DiscoverBanner.defaultProps = {
  className: '',
  loading: false,
  badgeText: null,
  primaryBtn: null,
  secondaryBtn: null
};

---

Note: The DiscoverBanner component is designed to be responsive and will adjust its layout based on the viewport size. The image is optional and will only be displayed if provided.

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	1
frontend-app-dashboard	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/platform-settings/customization/appearance/BannerEdit.jsx

frontend-app-dashboard

• src/components/CarouselContainer.jsx