diff --git a/src/components/Comments.jsx b/src/components/Comments.jsx
new file mode 100644
index 0000000..648e81a
--- /dev/null
+++ b/src/components/Comments.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export const Comments = (props) => {
+ return (
+
+
Comentarios
+
No aun :3
+
+ )
+}
diff --git a/src/index.jsx b/src/index.jsx
index 2a6da91..637d16c 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -15,6 +15,7 @@ import {ArtistView} from "./views/Artist";
import {DiscView} from "./views/Disc";
import {ReleaseView} from "./views/Release";
import {Recomended} from "./views/Recomended";
+import {SongView} from "./views/Song";
const Main = (props) => {
const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -46,6 +47,7 @@ const App = () => (
+
diff --git a/src/views/Song.jsx b/src/views/Song.jsx
new file mode 100644
index 0000000..12bc6ab
--- /dev/null
+++ b/src/views/Song.jsx
@@ -0,0 +1,49 @@
+import React, {Fragment, useEffect, useState} from 'react';
+
+import {capitalize, toDuration} from "../services/utils";
+import {getSong} from "../services/entity_service";
+
+import {Entity} from "../components/Entity";
+import {Comments} from "../components/Comments";
+
+const Song = (props) => {
+ const song = props.song;
+
+ if(!song) {
+ return
+ }
+
+ let subtitle = ''
+
+ if(song.disambiguation && song.length) {
+ subtitle = {capitalize(song.disambiguation)} - [{toDuration(song.length)}]
+ }else if (song.disambiguation) {
+ subtitle = {capitalize(song.disambiguation)}
+ }else if (song.length) {
+ subtitle = [{toDuration(song.length)}]
+ }
+
+ return
+
+}
+
+export const SongView = (props) => {
+ const mbid = props.match.params.mbid;
+ const [song, setSong] = useState(null);
+
+ useEffect(() => {
+ if (mbid) {
+ getSong(mbid).then((result) => setSong(result));
+ }
+ }, [mbid]);
+
+ return (
+
+
+ {song &&
+
+ }
+
+ )
+
+}