# 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 (
);
}
export default App;
```
## Components
### Main Layout Components
#### ``
Main layout for displaying courses with filtering and search capabilities.
```jsx
{
// Fetch courses based on filters
return fetchedCourses;
}}
onViewCourse={courseId => navigate(`/course/${courseId}`)}
onError={error => console.error(error)}
title="Academy Portal"
/>
```
#### ``
Layout for displaying a single course with video, chapters, and additional content.
```jsx
navigate('/academy')}
notes={courseNotes}
onAddNote={note => handleAddNote(note)}
onDeleteNote={noteId => handleDeleteNote(noteId)}
/>
```
### Course Components
#### ``
Displays a course card with thumbnail and metadata.
```jsx
handleSelectCourse(course.id)} />
```
#### ``
Displays a grid of course cards.
```jsx
navigate(`/course/${courseId}`)} />
```
### Course Content Components
#### ``
Video player component with custom controls.
```jsx
setCurrentTime(time)} />
```
#### ``
Displays course chapters with timestamps.
```jsx
seekToTime(timestamp)}
/>
```
### Utility Components
#### ``
Search input for filtering courses.
```jsx
setSearchQuery(query)} />
```
#### ``
Horizontal tabs for filtering by course category.
```jsx
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
```
## License
MIT