模仿网易云音乐桌面端功能-源码
1.先看效果
2.源代码
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Slider } from "@/components/ui/slider"
import { ChevronLeft, ChevronRight, Heart, Home, Library, List, Mic, Play, Repeat, Search, ShuffleIcon, SkipBack, SkipForward, User, Volume2 } from "lucide-react"
export default function Component() {
return (
{/* Top bar */}
{/* Main content */}
{/* Sidebar */}
发现音乐
播客
我的音乐
创建的歌单
我喜欢的音乐
每日推荐
流行
轻音乐
古典
{/* Main content area */}
发现音乐
{[...Array(10)].map((_, i) => (
src={`/placeholder.svg?height=200&width=200&text=Album ${i + 1}`}
alt={`Album ${i + 1}`}
className="object-cover w-full h-full"
/>
专辑名称 {i + 1}
歌手名称
))}
{/* Playback controls */}
当前播放的歌曲
歌手名称
1:23
3:45
)
}
扫描二维码分享
评论区
请登录后发表评论。