added basic radio explorer

packages/app/src/pages/music/tabs/index.jsx

@@ -1,23 +1,24 @@
 import LibraryTab from "./library"
 import ExploreTab from "./explore"
+import RadioTab from "./radio"
 
 export default [
-    {
+	{
-        key: "explore",
+		key: "explore",
-        label: "Explore",
+		label: "Explore",
-        icon: "FiCompass",
+		icon: "FiCompass",
-        component: ExploreTab
+		component: ExploreTab,
-    },
+	},
-    {
+	{
-        key: "library",
+		key: "library",
-        label: "Library",
+		label: "Library",
-        icon: "MdLibraryMusic",
+		icon: "MdLibraryMusic",
-        component: LibraryTab,
+		component: LibraryTab,
-    },
+	},
-    {
+	{
-        key: "radio",
+		key: "radio",
-        label: "Radio",
+		label: "Radio",
-        icon: "FiRadio",
+		icon: "FiRadio",
-        disabled: true
+		component: RadioTab,
-    },
+	},
-]
+]

packages/app/src/pages/music/tabs/radio/index.jsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { Skeleton, Result } from "antd"
+import RadioModel from "@models/radio"
+import Image from "@components/Image"
+
+import { MdPlayCircle, MdHeadphones } from "react-icons/md"
+
+import "./index.less"
+
+const RadioItem = ({ item }) => {
+	const start = () => {
+		app.cores.player.start(
+			{
+				title: item.name,
+				source: item.http_src,
+				cover: item.background,
+			},
+			{
+				radioId: item.radio_id,
+			},
+		)
+	}
+
+	return (
+		<div className="radio-list-item" onClick={start}>
+			<Image className="radio-list-item-cover" src={item.background} />
+			<div className="radio-list-item-content">
+				<h1>{item.name}</h1>
+				<p>{item.description}</p>
+
+				<div className="radio-list-item-info">
+					<div className="radio-list-item-info-item" id="now_playing">
+						<MdPlayCircle />
+						<span>{item.now_playing.song.text}</span>
+					</div>
+					<div className="radio-list-item-info-item" id="now_playing">
+						<MdHeadphones />
+						<span>{item.listeners}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+const RadioTab = () => {
+	const [L_Radios, R_Radios, E_Radios, M_Radios] = app.cores.api.useRequest(
+		RadioModel.getRadioList,
+	)
+
+	if (E_Radios) {
+		return <Result status="warning" title="Error to load radio list" />
+	}
+
+	if (L_Radios) {
+		return <Skeleton active />
+	}
+
+	return (
+		<div className="radio-list">
+			{R_Radios.map((item) => (
+				<RadioItem key={item.id} item={item} />
+			))}
+		</div>
+	)
+}
+
+export default RadioTab

packages/app/src/pages/music/tabs/radio/index.less

@@ -0,0 +1,80 @@
+.radio-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	width: 100%;
+
+	gap: 20px;
+}
+
+.radio-list-item {
+	position: relative;
+
+	display: flex;
+	flex-direction: column;
+
+	height: 160px;
+	width: 100%;
+
+	border-radius: 16px;
+	background-color: var(--background-color-accent);
+
+	overflow: hidden;
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	.lazy-load-image-background,
+	.radio-list-item-cover {
+		position: absolute;
+
+		z-index: 1;
+
+		top: 0;
+		left: 0;
+
+		width: 100%;
+		height: 100%;
+	}
+
+	.radio-list-item-content {
+		position: relative;
+		z-index: 2;
+
+		display: flex;
+		flex-direction: column;
+
+		justify-content: space-between;
+
+		width: 100%;
+		height: 100%;
+
+		backdrop-filter: blur(2px);
+
+		padding: 16px;
+
+		.radio-list-item-info {
+			display: flex;
+			align-items: center;
+
+			gap: 8px;
+
+			.radio-list-item-info-item {
+				display: flex;
+
+				flex-direction: row;
+				align-items: center;
+
+				gap: 8px;
+				padding: 4px;
+
+				background-color: rgba(var(--bg_color_3), 0.7);
+
+				border-radius: 8px;
+				font-size: 0.7rem;
+			}
+		}
+	}
+}