remove react

src/components/windows/main/SpotifyCard.astro

@@ -0,0 +1,184 @@
+---
+import LastFMIcon from "@assets/svg/fm.svg"
+---
+<div class="spotify-card-wrapper-shadow">
+	<div class="spotify-card-wrapper">
+		<div class="spotify-card">
+			<svg aria-hidden="true" class="blur">
+				<filter id='sharpBlur' color-interpolation-filters="sRGB">
+					<feGaussianBlur stdDeviation='100'></feGaussianBlur>
+					<feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0'></feColorMatrix>
+					<feComposite in2='SourceGraphic' operator='in'></feComposite>
+				</filter>
+			</svg>
+			<div class="spotify-card-background"></div>
+
+			<div class="spotify-card-art-shadow">
+				<div class="spotify-card-art"></div>
+			</div>
+			<div class="spotfiy-card-track-info">
+				<div class="spotify-card-track-name"></div>
+				<div class="spotify-card-track-artist"></div>
+				<div class="spotify-card-track-album"></div>
+			</div>
+
+			<div class="links">
+				<a class="lastfm-link" href="https://www.last.fm/user/nin0dev"><LastFMIcon /></a>
+			</div>
+		</div>
+	</div>
+</div>
+<style>
+	.blur {
+		display: none;
+	}
+
+	.spotify-card-wrapper-shadow {
+		display: none;
+		filter: drop-shadow(0 0 5px #00000040);
+	}
+
+	.spotify-card-wrapper {
+		position: relative;
+		display: flex;
+		background: var(--album-color);
+		clip-path: var(--clip-sp-1);
+	}
+
+	.spotify-card {
+		display: flex;
+		flex: 1;
+		gap: 12px;
+		padding: 15px;
+		align-items: center;
+		clip-path: var(--clip-sp-2);
+	}
+
+	.spotify-card-background {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 105%;
+		height: 105%;
+		background: var(--album-art);
+		background-size: 100% 100%;
+		filter: url("#sharpBlur") brightness(0.75);
+		z-index: -1;
+	}
+
+	.spotify-card-art-shadow {
+		filter: drop-shadow(0 0 5px #00000040);
+	}
+
+	.spotify-card-art-wrapper {
+		clip-path: var(--clip-sp-art-wrapper);
+		background: var(--album-color);
+	}
+	.spotify-card-art {
+		background-image: var(--album-art);
+		background-size: 100%;
+		width: 4rem;
+		height: 4rem;
+		clip-path: var(--clip-sp-art);
+	}
+
+	.spotfiy-card-track-info {
+		display: flex;
+		flex-direction: column;
+		line-height: 1;
+	}
+
+	.spotify-card-track-name {
+		margin-bottom: 5px;
+	}
+
+	.spotify-card-track-name::after {
+		content: var(--track);
+		font-weight: 500;
+		font-size: 1.05rem;
+		color: #ffffffd5;
+		filter: drop-shadow(0 0 5px #0000006d);
+	}
+
+	.spotify-card-track-artist::after, .spotify-card-track-album::after {
+		color: #ffffffa1;
+		font-weight: 500;
+		font-size: 0.85rem;
+		filter: drop-shadow(0 0 5px #00000040);
+	}
+
+	.spotify-card-track-artist::after {
+		content: var(--artist);
+	}
+
+	.spotify-card-track-album::after {
+		content: var(--album);
+	}
+
+	.links {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		margin: 10px;
+		display: flex;
+		gap: 7px;
+	}
+
+	.links a {
+		color: rgba(255, 255, 255, 0.516);
+		text-decoration: none;
+	}
+</style>
+<script>
+	import { mergeStyles } from "utils/mergeStyles";
+	import { average } from "color.js";
+	import { LASTFM_KEY, LASTFM_API } from "utils/constants";
+	const spotifyCardWrapper: HTMLElement = document.querySelector(".spotify-card-wrapper-shadow");
+
+	async function getLastFmTracks() {
+		const params = new URLSearchParams({
+			method: "user.getrecenttracks",
+			api_key: LASTFM_KEY,
+			user: "nin0dev",
+			limit: "50",
+			format: "json",
+			extended: "true"
+		});
+
+		const response = await(
+			await fetch(`${LASTFM_API}${params}`)
+		).json();
+
+		// TODO: make lastfm stuff typed
+		if (
+			response.recenttracks.track.some(t => {
+				try {
+					return t["@attr"].nowplaying === "true";
+				} catch (e) {
+					return false;
+				}
+			})
+		) {
+			const track = response.recenttracks.track[0];
+
+			mergeStyles({
+				"display": "block",
+				"--album-art": `url("${track.image[1]["#text"]}")`,
+				"--track": `'${track.name}'`,
+				"--album": `'${track.album["#text"]}'`,
+				"--album-color": await average(
+						`${track.image[1]["#text"]}`,
+							{
+								format: "hex"
+							}
+						),
+				"--artist": `'${track.artist.name}'`
+			}, spotifyCardWrapper.style);
+
+			(document.querySelector(".lastfm-link") as HTMLLinkElement).href = track.url;
+		}
+	}
+
+	getLastFmTracks();
+	setInterval(getLastFmTracks, 10000);
+</script>