From ca4e10e473970774c10e0f4c43f49cf7deb110cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Sun, 15 Nov 2020 02:33:39 +0100
Subject: [PATCH] feat(frontend): proper styling for "Top Artists" report

---
 frontend/src/components/ReportTopArtists.tsx |  5 ++---
 frontend/src/components/TopListItem.tsx      | 23 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/TopListItem.tsx

diff --git a/frontend/src/components/ReportTopArtists.tsx b/frontend/src/components/ReportTopArtists.tsx
index c55808a..f58153a 100644
--- a/frontend/src/components/ReportTopArtists.tsx
+++ b/frontend/src/components/ReportTopArtists.tsx
@@ -5,6 +5,7 @@ import { TimePreset } from "../api/entities/time-preset.enum";
 import { useTopArtists } from "../hooks/use-api";
 import { useAuth } from "../hooks/use-auth";
 import { ReportTimeOptions } from "./ReportTimeOptions";
+import { TopListItem } from "./TopListItem";
 
 export const ReportTopArtists: React.FC = () => {
   const { user } = useAuth();
@@ -53,9 +54,7 @@ export const ReportTopArtists: React.FC = () => {
           )}
           {reportHasItems &&
             topArtists.map(({ artist, count }) => (
-              <div key={artist.id}>
-                {count} - {artist.name}
-              </div>
+              <TopListItem key={artist.id} title={artist.name} count={count} />
             ))}
         </div>
       </div>
diff --git a/frontend/src/components/TopListItem.tsx b/frontend/src/components/TopListItem.tsx
new file mode 100644
index 0000000..2727796
--- /dev/null
+++ b/frontend/src/components/TopListItem.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+export const TopListItem: React.FC<{
+  key: string;
+  title: string;
+  subTitle?: string;
+  count: number;
+}> = ({ key, title, subTitle, count }) => {
+  return (
+    <div
+      key={key}
+      className="hover:bg-gray-100 border-b border-gray-200 flex md:justify-around text-gray-700 md:px-2 py-2"
+    >
+      <div className="md:flex w-11/12">
+        <div className={`${subTitle ? "md:w-1/2" : "md:w-full"} font-bold`}>
+          {title}
+        </div>
+        {subTitle && <div className="md:w-1/3">{subTitle}</div>}
+      </div>
+      <div className="w-1/12 self-center">{count}</div>
+    </div>
+  );
+};