BlendxCard Components

BlendxCard is a versatile card component library providing LearnerCard and StaffCard variants for displaying course/program information with different user contexts.

Installation

npm install @blend-ed/blendx-ui

Component Variants & Use Cases

1. LearnerCard

Used for learner-facing interfaces where users need to:

• Browse available courses/programs
• View course prices and progress
• Access learning materials
• Track completion status

Behavior Patterns

• Navigation:
  • When redirect={true}: Uses standard navigation
  • When redirect={false}: Navigation is handled by onClick handler
• Progress Display: Shows progress bar when type="PROGRESS"
• Price Display: Shows price when type="PRICE"
• Learning Mode: Displays learning controls when type="LEARNING"

import { LearnerCard, CARD_TYPES, CARD_VARIANTS } from '@blend-ed/blendx-ui';

// Price Display Card
<LearnerCard
  title="Course Title"
  link="/course/path"
  image="course-image.jpg"
  estimatedTime="2h 30m"
  totalCourses={5}
  price={99.99}
  type={CARD_TYPES.PRICE}
  variant={CARD_VARIANTS.COURSE}
  currency="$"
  onClick={() => handleCardClick()}
  redirect={false}
/>

// Progress Tracking Card
<LearnerCard
  title="Course Title"
  link="/course/path"
  image="course-image.jpg"
  type={CARD_TYPES.PROGRESS}
  progress={75}
  variant={CARD_VARIANTS.COURSE}
/>

LearnerCard Props

Prop	Type	Required	Description	Options
title	string	✓	Course/program title	-
link	string	✓	Navigation URL	-
image	string	✓	Card image URL	-
type	string	✓	Card behavior type	'progress', 'price', 'learning'
variant	string	✓	Content type	'course', 'program'
estimatedTime	string	-	Completion time	-
totalCourses	number	-	Number of courses (for programs)	-
price	number	-	Course/program price	-
progress	number	-	Completion percentage	0-100
currency	string	-	Price currency symbol	e.g., '$', '€', '£'
onClick	function	-	Click handler	-
redirect	boolean	-	Navigation behavior control	-
className	string	-	Custom CSS classes	-

2. StaffCard

Used for administrative interfaces where staff needs to:

• Manage course content
• Preview courses
• Access editing features
• Monitor course status

Behavior Patterns

• Access Control: Edit/preview options shown based on hasAccess
• Quick Actions: Direct links to edit and preview modes
• Navigation: Always uses standard routing through link prop

import { StaffCard, CARD_VARIANTS } from '@blend-ed/blendx-ui';

// Staff Management Card
<StaffCard
  title="Course Title"
  link="/course/path"
  image="course-image.jpg"
  estimatedTime="2h 30m"
  variant={CARD_VARIANTS.COURSE}
  editLink="/edit/course"
  liveLink="/view/course"
  hasAccess={true}
/>

StaffCard Props

Prop	Type	Required	Description	Options
title	string	✓	Course/program title	-
link	string	✓	Navigation URL	-
image	string	✓	Card image URL	-
variant	string	✓	Content type	'course', 'program'
editLink	string	-	Edit mode URL	-
liveLink	string	-	Preview mode URL	-
hasAccess	boolean	-	Edit/view permissions	-
estimatedTime	string	-	Completion time	-
className	string	-	Custom CSS classes	-

Type Constants

// Card Types (for LearnerCard)
CARD_TYPES = {
  PROGRESS: 'progress',  // Shows completion progress
  PRICE: 'price',       // Displays pricing information
  LEARNING: 'learning'  // Shows learning controls
}

// Card Variants (for both cards)
CARD_VARIANTS = {
  COURSE: 'course',     // Single course display
  PROGRAM: 'program'    // Program/bundle display
}

Styling

Components can be customized using these CSS classes:

.course-card {
  &__image          // Card image container
  &__body           // Content area
  &__badge          // Status/type badge
  &__title          // Title text
  &__info-panel     // Information section
  &__est-time       // Time display
  &__footer         // Bottom section
  &__price          // Price display
  &__share          // Share button
  &__resume-button  // Resume action
}

This enhanced documentation now clearly outlines:
- Specific use cases for each component
- Detailed behavior patterns
- Complete prop tables with requirements
- Type constants and their usage
- Routing behavior differences
- Styling customization options

## Dependencies

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


### Detailed usage locations:

**frontend-app-staff-dashboard**
- `src/pages/program-single/courses/index.jsx`

**frontend-app-dashboard**
- `src/components/CourseTab.jsx`
- `src/pages/course-single/top-courses/index.jsx`
- `src/pages/discover/courses-discover/index.jsx`
- `src/pages/home/recommended-courses/index.jsx`
- `src/pages/program-single/top-programs/index.jsx`
- `src/pages/wishlist/index.jsx`