feat(frontend): proper styling for "Top Artists" report

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>

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>
+  );
+};