apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(frontend): add visual indicator to top lists

Browse source
This commit is contained in:
Julian Tölle 2021-05-22 17:32:20 +02:00
parent 3228b22741
commit 8377b2f6d0
6 changed files with 79 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/ReportTopTracks.tsx
View file

@ -5,6 +5,7 @@ import { TimePreset } from "../api/entities/time-preset.enum";
import { Track } from "../api/entities/track";
import { useTopTracks } from "../hooks/use-api";
import { useAuth } from "../hooks/use-auth";
import { getMaxCount } from "../util/getMaxCount";
import { ReportTimeOptions } from "./ReportTimeOptions";
import { TopListItem } from "./TopListItem";
@ -32,6 +33,8 @@ export const ReportTopTracks: React.FC = () => {
return <Redirect to="/" />;
}
const maxCount = getMaxCount(topTracks);
return (
<div className="md:flex md:justify-center p-4">
<div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
@ -55,7 +58,7 @@ export const ReportTopTracks: React.FC = () => {
)}
{reportHasItems &&
topTracks.map(({ track, count }) => (
<ReportItem track={track} count={count} />
<ReportItem track={track} count={count} maxCount={maxCount} />
))}
</div>
</div>
@ -66,7 +69,8 @@ export const ReportTopTracks: React.FC = () => {
const ReportItem: React.FC<{
track: Track;
count: number;
}> = ({ track, count }) => {
maxCount: number;
}> = ({ track, count, maxCount }) => {
const artists = track.artists?.map((artist) => artist.name).join(", ") || "";
return (
@ -75,6 +79,7 @@ const ReportItem: React.FC<{
title={track.name}
subTitle={artists}
count={count}
maxCount={maxCount}
/>
);
};