added play page

packages/app/src/pages/play/[play_id].jsx

@@ -0,0 +1,87 @@
+import React from "react"
+import * as antd from "antd"
+import classnames from "classnames"
+import { ImageViewer } from "components"
+
+import PlaylistsModel from "models/playlists"
+
+import "./index.less"
+
+const PlaylistItem = ({ playlist }) => {
+    return <div>
+        Playlist Tracks
+    </div>
+}
+
+const TrackItem = ({ track }) => {
+    return <div>
+        Track
+    </div>
+}
+
+export default (props) => {
+    const play_id = props.match.params.play_id
+
+    const [playlist, setPlaylist] = React.useState(null)
+
+    const loadData = async () => {
+        const response = await PlaylistsModel.getPlaylist(play_id).catch((err) => {
+            console.error(err)
+            app.message.error("Failed to load playlist")
+            return null
+        })
+
+        console.log(response)
+
+        if (response) {
+            setPlaylist(response)
+        }
+    }
+
+    React.useEffect(() => {
+        loadData()
+    }, [])
+
+    if (!playlist) {
+        return <antd.Skeleton active />
+    }
+
+    const renderComponent = () => {
+        switch (playlist.type) {
+            case "playlist": {
+                return <PlaylistItem playlist={playlist} />
+            }
+            case "track": {
+                return <TrackItem track={playlist} />
+            }
+            default: {
+                return <TrackItem track={playlist} />
+            }
+        }
+    }
+
+    return <div
+        className={
+            classnames("play", playlist.type)
+        }
+    >
+        <div className="play_info_wrapper">
+            <div className="play_info">
+                <div className="play_info_cover">
+                    <ImageViewer src={playlist?.cover ?? "/assets/no_song.png"} />
+                </div>
+
+                <div className="play_info_details">
+                    <div className="play_info_title">
+                        <h1>{playlist.title}</h1>
+                    </div>
+                    <div className="play_info_author">
+                        {playlist.user.username}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {renderComponent()}
+    </div>
+}

packages/app/src/pages/play/index.less

@@ -0,0 +1,63 @@
+.play {
+    display: grid;
+
+    grid-template-columns: 1fr 50vw;
+    grid-template-rows: 1fr;
+    grid-column-gap: 20px;
+    grid-row-gap: 0px;
+
+    .play_info_wrapper {
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+
+        padding: 20px;
+
+        .play_info {
+            display: flex;
+            flex-direction: column;
+    
+            align-self: center;
+    
+            width: 30vw;
+            height: 100%;
+    
+            padding: 20px;
+    
+            background-color: var(--background-color-accent);
+            border-radius: 12px;
+
+            .play_info_cover {
+                display: flex;
+                flex-direction: column;
+    
+                align-items: center;
+                justify-content: center;
+    
+                width: 100%;
+                height: 100%;
+    
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    border-radius: 12px;
+                }
+            }
+
+            .play_info_details {
+                margin-top: 20px;
+                
+                .play_info_title {
+                    font-size: 1.5rem;
+                    font-family: "Space Grotesk", sans-serif;
+                }
+            }
+        }
+    }
+    
+}