void/components/Lanyard.tsx
2022-08-10 00:35:26 +02:00

45 lines
1.2 KiB
TypeScript

// import { lanyard } from "utils/shared/lanyard";
import { useLanyard } from "use-lanyard";
import styles from "styles/Lanyard.module.sass";
import Image from "next/image";
import { useTheme } from 'next-themes'
const Lanyard = () => {
const id = process.env.NEXT_DISCORD_ID || "318044130796109825";
const lanyard = useLanyard(id).data;
const { resolvedTheme: theme } = useTheme()
if (!lanyard?.listening_to_spotify) return;
let artists;
if (lanyard.spotify.artist.split(";").length > 2) {
artists = [
lanyard.spotify.artist.split(";")[0],
lanyard.spotify.artist.split(";")[1],
].join(",");
} else {
artists = lanyard.spotify.artist.split(";").join(",");
}
console.log("lanyard", theme)
return (
<>
<div data-theme={theme} className={[styles.container, styles.badge].join(" ")}>
<Image
className={styles.albumart}
src={lanyard.spotify.album_art_url}
width={100}
height={100}
/>
<div className={styles.artist_song}>
<p className={styles.song}>{lanyard.spotify.song}</p>
<p className={styles.artist}>{artists}</p>
</div>
</div>
</>
);
};
export default Lanyard;