TechGiant LMS Component Library

A comprehensive Learning Management System (LMS) component library built with React, TypeScript, and Tailwind CSS. This library provides reusable, customizable components for building modern LMS applications.

Features

• 🎨 Modern Design: Beautiful, responsive components with GSAP animations
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• 🎪 Storybook: Interactive documentation and component playground
• 🎨 Customizable: Easy to customize colors, themes, and styling
• 📱 Responsive: Works perfectly on all devices
• ⚡ Performance: Optimized with React best practices

Quick Start

Installation

npm install @techgiant/lms-components
# or
yarn add @techgiant/lms-components

Basic Usage

import { DynamicCourseCard, CourseCardProps } from '@techgiant/lms-components';

const courseData: CourseCardProps = {
  title: "React Fundamentals",
  price: "$99.99",
  chapters: 12,
  orders: 150,
  certificates: 45,
  reviews: 89,
  addedToShelf: 234,
  video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
  isFree: false,
  description: "Learn React from scratch",
  instructor: "John Doe",
  duration: "10 hours",
  level: "beginner",
  tags: ["React", "JavaScript", "Frontend"]
};

function App() {
  return (
    <div>
      <DynamicCourseCard 
        {...courseData}
        onCardClick={(course) => console.log('Course clicked:', course)}
      />
    </div>
  );
}

Components

DynamicCourseCard

A fully customizable course card component with YouTube video integration, statistics, and GSAP animations.

Props:

• title: Course title
• price: Course price (can be "Free" or "$XX.XX")
• chapters: Number of chapters
• orders: Number of orders
• certificates: Number of certificates issued
• reviews: Number of reviews
• addedToShelf: Number of times added to shelf
• video: YouTube embed URL
• isFree: Boolean for free courses
• description: Course description
• instructor: Instructor name
• duration: Course duration
• level: Difficulty level ('beginner', 'intermediate', 'advanced')
• tags: Array of course tags
• onCardClick: Click handler callback
• className: Custom CSS classes

LMSCourseTabs

Interactive section tabs with GSAP hover animations and metallic shine effects.

LMSSidebar

Fixed sidebar component for LMS navigation.

LMSDashboard

Complete dashboard layout with statistics and course sections.

Development

Running Storybook

npm run storybook
# or
yarn storybook

Visit http://localhost:6006 to view the interactive component documentation.

Building the Library

npm run build-storybook
# or
yarn build-storybook

Customization

Theme Colors

The components use Tailwind CSS classes and can be customized by:

1. Overriding CSS variables in your project
2. Using custom className props for styling
3. Modifying the Tailwind config to match your brand colors

Example Customization

<DynamicCourseCard
  {...courseData}
  className="bg-blue-500 text-white border-2 border-blue-300"
/>

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add stories for new components
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

For support, please open an issue on GitHub or contact us at [email protected]