33 lines
891 B
Text
33 lines
891 B
Text
---
|
|
import ProgressBar from "@components/media/ProgressBar.astro";
|
|
|
|
const { data, count } = Astro.props;
|
|
---
|
|
|
|
<div class="music-chart">
|
|
<ol type="1">
|
|
{
|
|
data.slice(0, count).map((item) => {
|
|
const percentage = `${item.chart.percentage}%`;
|
|
const playsLabel = item.chart.plays === 1 ? "play" : "plays";
|
|
|
|
return (
|
|
<li value={item.chart.rank}>
|
|
<div class="item">
|
|
<div class="info">
|
|
<a class="title" href={item.chart.url}>
|
|
{item.chart.title}
|
|
</a>
|
|
<span class="subtext">{item.chart.artist}</span>
|
|
<span class="subtext">
|
|
{item.chart.plays} {playsLabel}
|
|
</span>
|
|
</div>
|
|
<ProgressBar percentage={percentage} />
|
|
</div>
|
|
</li>
|
|
);
|
|
})
|
|
}
|
|
</ol>
|
|
</div>
|