Loading...
Installation
Usage
import PlaylistCarousel from "@/components/ruixen/playlist-carousel";
const playlistItems = [
{
id: "1",
title: "Song Title 1",
duration: "3:45",
image: "https://example.com/cover1.jpg",
audioSrc: "https://example.com/song1.mp3",
},
{
id: "2",
title: "Song Title 2",
duration: "4:12",
image: "https://example.com/cover2.jpg",
audioSrc: "https://example.com/song2.mp3",
},
];
export default function App() {
return <PlaylistCarousel items={playlistItems} width={200} height={250} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | PlaylistItem[] | - | Array of playlist items |
width | number | 200 | Width of each card |
height | number | 250 | Height of each card |
className | string | - | Additional CSS classes |
Features
- Horizontal Scrolling: Smooth carousel navigation
- Individual Players: Each item has its own play/pause control
- Progress Indicators: Linear and circular progress bars
- Album Artwork: Display cover images
- Time Display: Current time and total duration
- Auto-Stop: Stops other tracks when playing new one
PlaylistItem Type
export interface PlaylistItem {
id: string;
title: string;
duration: string;
image: string;
audioSrc: string;
}