模仿网易云音乐桌面端功能-源码

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 */}

Album cover

当前播放的歌曲

歌手名称

1:23

3:45

)

}

×
二维码

扫描二维码分享

评论区

登录后发表评论。