Improve the Discord status component

next.config.mjs

@@ -11,6 +11,10 @@ const nextConfig = {
 				protocol: "https",
 				hostname: "cdn.discordapp.com",
 			},
+			{
+				protocol: "https",
+				hostname: "i.scdn.co",
+			},
 			{
 				protocol: "https",
 				hostname: "bonfire.wtf",

package.json

@@ -20,7 +20,7 @@
 		"framer-motion": "^11.3.30",
 		"lucide-react": "^0.436.0",
 		"moment": "^2.30.1",
-		"next": "14.2.3",
+		"next": "^14.2.7",
 		"next-themes": "^0.3.0",
 		"react": "^18",
 		"react-dom": "^18",

src/app/(pages)/page.tsx

@@ -19,7 +19,7 @@ const LandingPage = (): ReactElement => (
             <BlurFade className="my-7" delay={1.25} inView>
                 <Navigation />
             </BlurFade>
-            <BlurFade className="my-7" delay={1.85} inView>
+            <BlurFade delay={1.85} inView>
                 <DiscordStatus />
             </BlurFade>
         </div>

src/components/landing/discord-status.tsx

@@ -1,11 +1,19 @@
 "use client";
 
 import { ReactElement, useEffect, useState } from "react";
-import { Data, DiscordUser, useLanyardWS } from "use-lanyard";
+import {
+    Activity,
+    Data,
+    DiscordUser,
+    Spotify,
+    useLanyardWS,
+} from "use-lanyard";
 import DCDNUser from "@/types/dcdn";
 import axios from "axios";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
+import moment from "moment";
+import { PuzzlePieceIcon } from "@heroicons/react/24/outline";
 
 const statusColors = {
     online: "bg-green-500",
@@ -57,7 +65,7 @@ const DiscordStatus = (): ReactElement | undefined => {
     }
 
     return (
-        <div className="flex justify-center">
+        <div className="flex justify-center select-none">
             <div className="flex flex-col bg-zinc-900 rounded-xl">
                 <BannerAvatar
                     discordData={discordData}
@@ -66,12 +74,30 @@ const DiscordStatus = (): ReactElement | undefined => {
                 />
 
                 <div className="px-3.5 pt-1.5 py-2.5 flex flex-col">
-                    <div className="ml-[5.65rem] flex items-center">
+                    <div className="ml-[5.65rem] flex items-start">
                         {dcdnUser.bio && <Bio dcdnUser={dcdnUser} />}
                         <Badges dcdnUser={dcdnUser} />
                     </div>
                     <div className="mt-3">
                         <Username discordUser={discordUser} />
+
+                        {/* Activity */}
+                        {discordData.activities.length > 0 && (
+                            <div className="mt-2 p-2 bg-zinc-950/65 rounded-lg">
+                                {discordData.activities[0].name !==
+                                "Spotify" ? (
+                                    <GameActivity
+                                        activity={discordData.activities[0]}
+                                    />
+                                ) : (
+                                    discordData.spotify && (
+                                        <SpotifyActivity
+                                            spotify={discordData.spotify}
+                                        />
+                                    )
+                                )}
+                            </div>
+                        )}
                     </div>
                 </div>
             </div>
@@ -88,9 +114,9 @@ const BannerAvatar = ({
     discordUser: DiscordUser;
     dcdnUser: DCDNUser;
 }): ReactElement => (
-    <div className="relative select-none">
+    <div className="relative">
         <Image
-            className="rounded-t-xl"
+            className="border-2 border-zinc-900 rounded-t-xl"
             src={`https://cdn.discordapp.com/banners/${discordUser.id}/${dcdnUser.banner}.webp?size=1024`}
             alt={`${discordUser.username}'s Banner`}
             width={300}
@@ -115,9 +141,7 @@ const BannerAvatar = ({
 );
 
 const Bio = ({ dcdnUser }: { dcdnUser: DCDNUser }): ReactElement => (
-    <div className="p-2 bg-zinc-950/75 text-sm rounded-xl select-none">
+    <div className="p-2 bg-zinc-950/65 text-sm rounded-xl">{dcdnUser.bio}</div>
-        {dcdnUser.bio}
-    </div>
 );
 
 const Badges = ({ dcdnUser }: { dcdnUser: DCDNUser }): ReactElement => (
@@ -149,4 +173,84 @@ const Username = ({
     </div>
 );
 
+const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => {
+    const startTimestamp: number = spotify.timestamps.start; // Example start timestamp
+    const endTimestamp: number = spotify.timestamps.end; // Example end timestamp
+    const [songProgress, setSongProgress] = useState<string | undefined>();
+    const songDuration: string = moment(endTimestamp - startTimestamp).format(
+        "m:ss"
+    );
+
+    // Update the song progress every second
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const songProgress: string = moment(
+                Date.now() - startTimestamp
+            ).format("m:ss");
+            setSongProgress(songProgress);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [startTimestamp]);
+
+    return (
+        <div className="flex items-start">
+            <div className="flex gap-2 items-center">
+                {/* Artwork */}
+                <Image
+                    className="rounded-lg"
+                    src={spotify.album_art_url as string}
+                    alt={`Track artwork of ${spotify.song} by ${spotify.artist}`}
+                    width={54}
+                    height={54}
+                />
+
+                {/* Track Info */}
+                <div className="flex flex-col text-sm">
+                    <h1 className="font-bold leading-none">{spotify.song}</h1>
+                    <h2 className="font-light opacity-70">{spotify.artist}</h2>
+                    <p className="text-xs font-light opacity-70">
+                        {songProgress} / {songDuration}
+                    </p>
+                </div>
+            </div>
+
+            {/* Spotify Logo */}
+            <Image
+                className="ml-auto"
+                src="https://cdn.rainnny.club/97JxTtnlhSun.png"
+                alt="Spotify Logo"
+                width={18}
+                height={18}
+            />
+        </div>
+    );
+};
+
+const GameActivity = ({ activity }: { activity: Activity }): ReactElement => (
+    <div className="flex items-start">
+        <div className="flex gap-2 items-center">
+            {/* Artwork */}
+            <Image
+                className="rounded-lg"
+                src={`https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets?.large_image || activity.assets?.small_image}.png?size=1024`}
+                alt={`Game artwork of ${activity.name}`}
+                width={54}
+                height={54}
+            />
+
+            {/* Activity Info */}
+            <div className="flex flex-col text-sm">
+                <h1 className="font-bold leading-none">{activity.name}</h1>
+                <h2 className="font-light opacity-70">{activity.details}</h2>
+                <p className="text-xs font-light opacity-70">
+                    {activity.state}
+                </p>
+            </div>
+        </div>
+
+        {/* Activity Logo */}
+        <PuzzlePieceIcon className="ml-auto" width={18} height={18} />
+    </div>
+);
+
 export default DiscordStatus;