Merge pull request #82 from kr-anurag/patch

feat: show current streaming song [spotify]

components/Misc/Spotify.card.tsx

@@ -0,0 +1,54 @@
+import { FC } from "react";
+
+import { useLanyard } from "use-lanyard";
+import Image from "next/image";
+
+const SpotifyCard: FC = () => {
+  const DISCORD_ID = "849171428497424404";
+  const { data: activity } = useLanyard(DISCORD_ID);
+
+  const USERNAME = activity?.discord_user?.username;
+
+  return (
+    <>
+      <div className="font-sen mb-8 flex flex-row items-center gap-x-4 rounded-md bg-zinc-700 p-4 sm:p-6 text-white">
+        <div>
+          {activity?.listening_to_spotify ? (
+            <Image
+              src={activity?.spotify?.album_art_url}
+              alt="album cover"
+              width={100}
+              height={100}
+              className="rounded-md"
+            />
+          ) : (
+            <Image
+              src="/assests/spotify.svg"
+              alt="spotify icon"
+              width={60}
+              height={60}
+            />
+          )}
+        </div>
+
+        <div className="flex flex-col">
+          {activity?.listening_to_spotify ? (
+            <>
+              <div className="text-xl font-bold">
+                {USERNAME} is listening to
+              </div>
+
+              <div className="font-semibold">{activity?.spotify?.song}</div>
+
+              <div className="font-medium">by {activity?.spotify?.artist}</div>
+            </>
+          ) : (
+            <div>{USERNAME} is not listening to anything</div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SpotifyCard;

components/index.ts

@@ -3,3 +3,4 @@ export { default as About } from "./Sections/About.section";
 export { default as Skills } from "./Sections/Skills.section";
 export { default as Projects } from "./Sections/Projects.section";
 export { default as Contact } from "./Sections/Contact.section";
+export { default as SpotifyCard } from "./Misc/Spotify.card"

next.config.js

@@ -4,4 +4,7 @@ module.exports = {
   sassOptions: {
     includePaths: [path.join(__dirname, "styles")],
   },
+  images: {
+    domains: ["cdn.discordapp.com", "i.scdn.co"],
+  },
 };

package.json

@@ -13,7 +13,8 @@
     "next-seo": "^4.29.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "sass": "^1.49.0"
+    "sass": "^1.49.0",
+    "use-lanyard": "^1.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.0.1",
@@ -31,4 +32,4 @@
     "typescript": "^4.5.2"
   },
   "version": "0.1.4"
-}
+}

pages/index.tsx

@@ -1,6 +1,6 @@
 import type { NextPage } from "next";
 
-import { Header, About, Projects, Skills, Contact } from "../components";
+import { Header, About, Projects, Skills, Contact, SpotifyCard } from "../components";
 
 const Home: NextPage = () => {
   return (
@@ -10,6 +10,10 @@ const Home: NextPage = () => {
       <Skills />
       <Projects />
       <Contact />
+
+      <div className="flex justify-center">
+        <SpotifyCard />
+      </div>
     </div>
   );
 };

yarn.lock

@@ -2766,6 +2766,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swr@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.2.2.tgz#6cae09928d30593a7980d80f85823e57468fac5d"
+  integrity sha512-ky0BskS/V47GpW8d6RU7CPsr6J8cr7mQD6+do5eky3bM0IyJaoi3vO8UhvrzJaObuTlGhPl2szodeB2dUd76Xw==
+
 tailwindcss@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.0.tgz"
@@ -2933,6 +2938,13 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-lanyard@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-lanyard/-/use-lanyard-1.1.0.tgz#50ae57dd8ea36464827e5e205b30f594ffbbe6da"
+  integrity sha512-9yfDnDKCNYR/VIUKSq5V+ACSwZECNrA1ogduigZzF8AuEVwCjrckFBL56dLQHISqsPiB5MfypgpVU+c757EZ3g==
+  dependencies:
+    swr "^1.2.2"
+
 [email protected]:
   version "1.5.1"
   resolved "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz"