@hirebus/academy/README.library.md

React component library for academy and learning platforms

# Academy UI

A React component library for building academy and learning platforms. This library provides a set of reusable components for creating educational content, course catalogs, and learning management interfaces.

## Features

- 🎓 **Course Catalog**: Components for displaying and navigating courses
- 📱 **Responsive Design**: Mobile and desktop optimized layouts
- 🎬 **Video Content**: Video playback with chapter navigation
- 📝 **Notes Management**: Note-taking functionality for courses
- 🔍 **Search & Filtering**: Search bar and category filtering

## Installation

```bash
# Using npm
npm install @your-org/academy-ui

# Using yarn
yarn add @your-org/academy-ui

# Using pnpm
pnpm add @your-org/academy-ui
```

## Setup

### Tailwind CSS

This library uses Tailwind CSS. Make sure to include the library's components in your Tailwind content configuration:

```js
// tailwind.config.js
module.exports = {
  content: [
    // ...
    './node_modules/@your-org/academy-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
};
```

### Styles

Import the library styles in your main application file:

```jsx
// main.jsx or main.tsx
import '@your-org/academy-ui/styles.css';
```

## Basic Usage

```jsx
import { AcademyLayout, CourseCategory } from '@your-org/academy-ui';

function App() {
  const courses = [
    {
      id: '1',
      title: 'Introduction to React',
      description: 'Learn the basics of React development',
      category: CourseCategory.SkillsDevelopment,
      tags: ['react', 'frontend'],
      thumbnail: 'https://example.com/thumbnails/react.jpg',
      videoUrl: 'https://example.com/videos/react-intro.mp4',
      duration: 3600, // seconds
      createdAt: '2023-01-01T00:00:00Z',
      isActive: true,
      creatorId: 'user1',
    },
    // More courses...
  ];

  const handleViewCourse = courseId => {
    console.log(`Navigating to course: ${courseId}`);
    // Add your navigation logic here
  };

  return (
    <AcademyLayout
      initialCourses={courses}
      onViewCourse={handleViewCourse}
      title="Learning Portal"
    />
  );
}

export default App;
```

## Components

### Main Layout Components

#### `<AcademyLayout>`

Main layout for displaying courses with filtering and search capabilities.

```jsx
<AcademyLayout
  initialCourses={courses}
  categories={[CourseCategory.AllCourses, CourseCategory.SkillsDevelopment]}
  initialActiveCategory={CourseCategory.AllCourses}
  onFetchCourses={async filters => {
    // Fetch courses based on filters
    return fetchedCourses;
  }}
  onViewCourse={courseId => navigate(`/course/${courseId}`)}
  onError={error => console.error(error)}
  title="Academy Portal"
/>
```

#### `<CourseViewLayout>`

Layout for displaying a single course with video, chapters, and additional content.

```jsx
<CourseViewLayout
  course={course}
  onBack={() => navigate('/academy')}
  notes={courseNotes}
  onAddNote={note => handleAddNote(note)}
  onDeleteNote={noteId => handleDeleteNote(noteId)}
/>
```

### Course Components

#### `<CourseCard>`

Displays a course card with thumbnail and metadata.

```jsx
<CourseCard course={course} onSelect={() => handleSelectCourse(course.id)} />
```

#### `<CourseGrid>`

Displays a grid of course cards.

```jsx
<CourseGrid courses={filteredCourses} onViewCourse={courseId => navigate(`/course/${courseId}`)} />
```

### Course Content Components

#### `<VideoPlayer>`

Video player component with custom controls.

```jsx
<VideoPlayer videoUrl={course.videoUrl} onTimeUpdate={time => setCurrentTime(time)} />
```

#### `<ChaptersContent>`

Displays course chapters with timestamps.

```jsx
<ChaptersContent
  chapters={course.aiGenerated?.chapters || []}
  onSelectChapter={timestamp => seekToTime(timestamp)}
/>
```

### Utility Components

#### `<SearchBar>`

Search input for filtering courses.

```jsx
<SearchBar onSearch={query => setSearchQuery(query)} />
```

#### `<CategoryTabs>`

Horizontal tabs for filtering by course category.

```jsx
<CategoryTabs
  categories={Object.values(CourseCategory)}
  activeCategory={activeCategory}
  courseCount={totalCourseCount}
  onSelectCategory={category => setActiveCategory(category)}
/>
```

## TypeScript Support

This library is built with TypeScript and provides full type definitions for all components and data structures.

```tsx
import { AcademyLayout, type Course, CourseCategory } from '@your-org/academy-ui';

// Type-safe course object
const course: Course = {
  id: '1',
  title: 'TypeScript Fundamentals',
  description: 'Learn TypeScript from the ground up',
  category: CourseCategory.SkillsDevelopment,
  // ...other required fields
};
```

## Customization

Most components accept a `className` prop for custom styling using Tailwind CSS.

```jsx
<AcademyLayout
  className="bg-slate-50 dark:bg-slate-900"
  // other props
/>
```

## License

MIT