2022-04-09 07:58:53 +00:00
|
|
|
import React from "react";
|
|
|
|
import SkillCard from "../skillCard";
|
2023-04-24 07:36:21 +00:00
|
|
|
import useLastFM from "hooks/useLastFM";
|
2022-04-09 07:58:53 +00:00
|
|
|
|
|
|
|
function LastFMCurrentSkillCard({
|
|
|
|
title,
|
|
|
|
image,
|
|
|
|
empty,
|
|
|
|
artist,
|
|
|
|
albumImg,
|
|
|
|
name,
|
|
|
|
url,
|
|
|
|
}) {
|
2023-04-24 07:36:21 +00:00
|
|
|
const {status,song} = useLastFM();
|
2022-04-11 18:54:36 +00:00
|
|
|
|
2023-04-24 07:36:21 +00:00
|
|
|
if (status !== "playing") {
|
2022-04-11 18:54:36 +00:00
|
|
|
return (
|
|
|
|
<SkillCard title={title} image={image} url={url}>
|
|
|
|
Not listening to anything
|
|
|
|
</SkillCard>
|
|
|
|
);
|
|
|
|
}
|
2022-04-09 07:58:53 +00:00
|
|
|
return (
|
|
|
|
<SkillCard title={title} image={image} url={url}>
|
|
|
|
<div className="description">
|
2023-04-24 07:36:21 +00:00
|
|
|
{empty ? "No recent tracks" : `${song.artist} - ${song.name}`}
|
2022-04-09 07:58:53 +00:00
|
|
|
</div>
|
|
|
|
<div className="description">
|
2023-04-24 07:36:21 +00:00
|
|
|
{empty ? "" : <img src={song.art} alt={`${song.artist} - ${song.name}`} className="albumart"/>}
|
2022-04-09 07:58:53 +00:00
|
|
|
</div>
|
|
|
|
</SkillCard>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-04-24 07:36:21 +00:00
|
|
|
export default LastFMCurrentSkillCard;
|