feat: add download count next to download button

Author: Bentroen

web/src/modules/song/components/SongPageButtons.tsx

@@ -205,10 +205,12 @@ const DownloadSongButton = ({
   song: {
     publicId: string;
     title: string;
+    downloadCount: number;
   };
 }) => {
   return (
     <DownloadButton
+      downloadCount={song.downloadCount}
       handleClick={() => {
         downloadSongFile(song);
       }}
@@ -217,20 +219,25 @@ const DownloadSongButton = ({
 };
 
 const DownloadButton = ({
+  downloadCount,
   handleClick,
 }: {
+  downloadCount: number;
   handleClick: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
   return (
-    <button
-      onClick={handleClick}
-      className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:bg-green-500'
-    >
-      <div className='flex flex-row items-center gap-2'>
-        <FontAwesomeIcon icon={faDownload} />
-        <div>Download</div>
-      </div>
-    </button>
+    <div className='flex gap-0.5'>
+      <button
+        onClick={handleClick}
+        className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:bg-green-500'
+      >
+        <div className='flex flex-row items-center gap-2'>
+          <FontAwesomeIcon icon={faDownload} />
+          <div>Download</div>
+        </div>
+      </button>
+      <CountBalloon count={downloadCount} />
+    </div>
   );
 };