67 lines
1.8 KiB
TypeScript
67 lines
1.8 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'
|
|
import useWindowSize from "utils/shared/hooks/useWindowSize";
|
|
import Icon from "./Icon";
|
|
|
|
const Lanyard = () => {
|
|
const id = process.env.NEXT_DISCORD_ID || "318044130796109825";
|
|
const lanyard = useLanyard(id).data;
|
|
const { resolvedTheme: theme } = useTheme()
|
|
const windowSize = useWindowSize()
|
|
|
|
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(" &");
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
{(windowSize.width <= 550 || windowSize.height <= 800) ?
|
|
(<>
|
|
<div data-theme={theme} className={styles.np_mobile}>
|
|
|
|
<div className={styles.np_text}>
|
|
<p>
|
|
<Icon className={styles.np_icon} icon="asterisk" />
|
|
{lanyard.spotify.song} by {artists}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>)
|
|
:
|
|
(<>
|
|
<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;
|