Move musicalyst to card below list

components/main.tsx

@@ -1,11 +1,11 @@
-import { Progress } from "@/components/ui/progress";
 import { Translation, useTranslation } from 'react-i18next';
 import {
   PlaylistDeduplicator,
   SavedTracksDeduplicator
 } from '../dedup/deduplicator';
 import { SpotifyTrackType, SpotifyUserType } from '../dedup/spotifyApi';
 
+import { Progress } from "@/components/ui/progress";
 import React from 'react';
 import Process from '../dedup/process';
 import { PlaylistModel } from '../dedup/types';
@@ -14,6 +14,7 @@ import BuyMeACoffee from './bmc';
 import { DuplicateTrackList } from './duplicateTrackList';
 import { DuplicateTrackListItem } from './duplicateTrackListItem';
 import Panel from './panel';
+import TryMusicalyst from "./tryMusicalyst";
 
 const Status = ({ toProcess }) => {
   const { t } = useTranslation();
@@ -207,32 +208,6 @@ export default class Main extends React.Component<{
                 {(t) => t('process.status.complete.nodups.body')}
               </Translation>
               <BuyMeACoffee />
-              {this.state.hasUsedSpotifyTop === false ? (
-                <div>
-                  <p>
-                    <strong>
-                      <Translation>
-                        {(t) => t('spotifytop.heading')}
-                      </Translation>
-                    </strong>{' '}
-                    <Translation>
-                      {(t) => t('spotifytop.description')}
-                    </Translation>{' '}
-                    <strong>
-                      <Translation>{(t) => t('spotifytop.check1')}</Translation>
-                      ,{' '}
-                      <a
-                        href="https://musicalyst.com/?ref=spotifydedup"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        Musicalyst
-                      </a>
-                    </strong>{' '}
-                    <Translation>{(t) => t('spotifytop.check2')}</Translation>
-                  </p>
-                </div>
-              ) : null}
             </span>
           )}
           {(this.state.toProcess > 0 || this.state.progress < 100) && (
@@ -361,6 +336,7 @@ export default class Main extends React.Component<{
               ))}
           </ul>
         )}
+        {this.state.toProcess == 0 && <TryMusicalyst accessToken={this.props.accessToken} />}
         <style jsx>
           {`
             .bd {

components/tryMusicalyst.tsx

@@ -0,0 +1,56 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import { useEffect, useState } from "react";
+
+import { Translation } from 'react-i18next';
+
+const TryMusicalyst = ({ accessToken }: { accessToken: string }) => {
+  const [hasUsedMusicalyst, setHasUsedMusicalyst] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(`https://musicalyst.com/api/profile`, {
+        method: 'GET',
+        headers: { 'Spotify-Auth': accessToken },
+      });
+      const data = await response.json();
+      setHasUsedMusicalyst(data.hasUsedSpotifyTop);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    hasUsedMusicalyst && <Card>
+      <CardHeader>
+        <CardTitle><Translation>
+          {(t) => t('spotifytop.heading')}
+        </Translation></CardTitle>
+        <CardDescription><Translation>
+          {(t) => t('spotifytop.description')}
+        </Translation>{' '}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          <strong>
+            <Translation>{(t) => t('spotifytop.check1')}</Translation>
+            ,{' '}
+            <a
+              href="https://musicalyst.com/?ref=spotifydedup"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Musicalyst
+            </a>
+          </strong>{' '}
+          <Translation>{(t) => t('spotifytop.check2')}</Translation></p>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default TryMusicalyst;

components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }