Components
Loading preview...
Music Player Card A visually polished and interactive music player card component. It features a glassmorphism effect, animated progress bar, and theme-adaptive styling, making it suitable for modern web applications.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/music-player-cardimport * as React from "react";
import { MusicPlayerCard } from "@/components/ui/music-player-card";
const DURATION_IN_SECONDS = 185; // e.g., 3 minutes and 5 seconds
export default function MusicPlayerDemo() {
const [isPlaying, setIsPlaying] = React.useState<boolean>(false);
const [isLiked, setIsLiked] = React.useState<boolean>(false);
const [currentProgress, setCurrentProgress] = React.useState<number>(52); // Start at 52 seconds
// Effect to simulate song progress with advanced animation
React.useEffect(() => {
let interval: NodeJS.Timeout;
if (isPlaying) {
interval = setInterval(() => {
setCurrentProgress((prev) => {
if (prev >= DURATION_IN_SECONDS) {
setIsPlaying(false); // Stop playing when song ends
return 0; // Reset progress
}
return prev + 1;
});
}, 1000);
}
// Cleanup on component unmount or when isPlaying changes
return () => clearInterval(interval);
}, [isPlaying]);
const handlePlayPause = () => {
setIsPlaying((prev) => !prev);
};
const handleLike = () => {
setIsLiked((prev) => !prev);
};
const handleNext = () => {
console.log("Next button clicked");
// Logic to skip to the next track
setCurrentProgress(0); // Reset progress for demo
};
const handlePrev = () => {
console.log("Previous button clicked");
// Logic to go to the previous track
setCurrentProgress(0); // Reset progress for demo
};
const handleShare = () => {
console.log("Share button clicked");
// Logic to open share dialog
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<MusicPlayerCard
artistName="Terence Howard"
artistHandle="@terenceh"
avatarSrc="https://i.pravatar.cc/150?u=terence"
albumArtSrc="https://plus.unsplash.com/premium_photo-1705351823638-54bcc44babe3?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjV8fGFsYnVtfGVufDB8fDB8fHww?q=80&w=1964&auto=format&fit=crop"
songDuration={DURATION_IN_SECONDS}
currentProgress={currentProgress}
isPlaying={isPlaying}
isLiked={isLiked}
onPlayPauseClick={handlePlayPause}
onLikeClick={handleLike}
onNextClick={handleNext}
onPrevClick={handlePrev}
onShareClick={handleShare}
/>
</div>
);
}