feat: music video card (#57)

* feat: add music video list page

* chore: lint

src/config/project.js

@@ -97,5 +97,94 @@ const Movies = [
 			"MV5BZTcyNjk1MjgtOWI3Mi00YzQwLWI5MTktMzY4ZmI2NDAyNzYzXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_SX300",
 	},
 ];
-
-export { Works, SideProjects, SONG_BASEURL, Songs, Movies, MOVIE_BASEURL };
+const MUSICVIDEO_BASEURL = "https://www.bilibili.com/video/";
+const Music = [
+	{
+		name: "Autumn Leaves",
+		author: "Joe Pass",
+		imageUrl: "autumn-leaves",
+		url: "BV1P24y1G7MZ",
+	},
+	{
+		name: "Blue Moon",
+		author: "David Tao",
+		imageUrl: "blue-moon",
+		url: "BV12M411e7L9",
+	},
+	{
+		name: "Seventeen",
+		author: "David Tao",
+		imageUrl: "seventeen",
+		url: "BV11f4y1R7H2",
+	},
+	{
+		name: "Slient Night",
+		author: "Joseph Mohr, Franz Xaver Gruber",
+		imageUrl: "slient-night",
+		url: "BV1e7411X7Yh",
+	},
+	{
+		name: "Everything's Gone",
+		author: "David Tao",
+		imageUrl: "everything-gone",
+		url: "BV1i7411u7Ur",
+	},
+	{
+		name: "Evergreen",
+		author: "Satoshi Gogo",
+		imageUrl: "evergreen",
+		url: "BV1xt411t71S",
+	},
+	{
+		name: "Santa Claus is Coming To Town",
+		author: "J. Fred Coots, Haven Gillespie",
+		imageUrl: "santa-claus-is-coming-to-town",
+		url: "BV1Ut411Y7uu",
+	},
+	{
+		name: "When I'm Sixty-Four",
+		author: "The Beatles",
+		imageUrl: "when-i-am-sixty-four",
+		url: "BV1St411Y7WS",
+	},
+	{
+		name: "Can't Buy Me Love",
+		author: "The Beatles",
+		imageUrl: "cant-buy-me-love",
+		url: "BV1Zt411m7XC",
+	},
+	{
+		name: "The Way Home",
+		author: "Satoshi Gogo",
+		imageUrl: "the-way-home",
+		url: "BV19s411L7P5",
+	},
+	{
+		name: "Waiting For The Wind",
+		author: "Satoshi Gogo",
+		imageUrl: "waiting-for-the-wind",
+		url: "BV13W411x7i6",
+	},
+	{
+		name: "The Capital",
+		author: "Satoshi Gogo",
+		imageUrl: "the-capital",
+		url: "BV1vW411J792",
+	},
+	{
+		name: "Love Under The Moon",
+		author: "Satoshi Gogo",
+		imageUrl: "love-under-the-moon",
+		url: "BV1CW411n7Jm",
+	},
+];
+export {
+	Works,
+	SideProjects,
+	SONG_BASEURL,
+	Songs,
+	Movies,
+	MOVIE_BASEURL,
+	Music,
+	MUSICVIDEO_BASEURL,
+};

src/pages/music/+Page.jsx

@@ -1,9 +1,9 @@
-import React from "react";
-
+import { MusicCover, MusicList } from "./components";
 export default function Page() {
 	return (
-		<div className="h-screen w-full prose flex flex-col justify-center items-center font-serif">
-			<h1>Music</h1>
+		<div className="flex flex-col w-full h-full justify-center items-center gap-4 mt-4">
+			<MusicCover />
+			<MusicList />
 		</div>
 	);
 }

src/pages/music/components/MusicCover.jsx

@@ -0,0 +1,12 @@
+export default function MusicCover() {
+	return (
+		<div className="flex flex-col justify-center items-center gap-2">
+			<div className="rounded-md w-72 h-72 drop-shadow-md border bg-gradient-to-br from-gray-100 via-pink-50 to-red-700 p-4">
+				<span className="text-4xl font-semibold text-black/90">David Dong's Videolist</span>
+			</div>
+			<div className="text-2xl font-semibold text-black/90">David Dong's Videolist</div>
+			<h2 className="text-[#d60017] text-xl font-normal">David Dong</h2>
+			<div className="text-[13px] text-black/50">FingerStyle Guitar</div>
+		</div>
+	);
+}

src/pages/music/components/MusicList.jsx

@@ -0,0 +1,42 @@
+import { MusicPlayIcon } from "@/components/ui/icons";
+import { Music } from "@/config/project";
+
+function MusicItem({ imageUrl, url, name, author }) {
+	const backgroundImageUrl = `/music/${imageUrl}.jpg`;
+	return (
+		<div className="group flex justify-center items-center hover:bg-zinc-100 hover:rounded-md p-2">
+			<div
+				style={{ backgroundImage: `url(${backgroundImageUrl})` }}
+				className="relative rounded-md drop-shadow-sm border min-w-56 h-36 bg-cover bg-center flex justify-center items-center"
+			>
+				<div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity rounded-md"></div>
+				<MusicPlayIcon
+					className="w-10 h-10 hidden group-hover:block z-10 cursor-pointer"
+					onClick={() => {
+						window.location.href = url;
+					}}
+				/>
+			</div>
+			<div className="flex flex-col justify-center ml-2 w-full">
+				<div className="text-black/80 text-md font-normal">{name}</div>
+				<div className="text-black/50 text-sm font-normal">{author}</div>
+			</div>
+		</div>
+	);
+}
+
+export default function MusicList() {
+	return (
+		<div className="flex flex-col p-1 space-y-2">
+			{Music.map((song) => (
+				<MusicItem
+					key={song.name}
+					imageUrl={song.imageUrl}
+					url={song.url}
+					name={song.name}
+					author={song.author}
+				/>
+			))}
+		</div>
+	);
+}

src/pages/music/components/index.jsx

@@ -0,0 +1,4 @@
+import MusicCover from "./MusicCover";
+import MusicList from "./MusicList";
+
+export { MusicCover, MusicList };