Rainnny/rainnny.club
Rainnny/rainnny.club
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Activity

Make it so you can click on the Spotify activity to view the track on Spotify
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 58s
Details

Browse Source
This commit is contained in:
Braydon 2024-09-04 15:15:53 -04:00
parent b04586caf2
commit 68c9f0d8ec
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/landing/discord-status.tsx
View File

@ -15,6 +15,7 @@ import { cn, truncateText } from "@/lib/utils";
import moment from "moment";
import { PuzzlePieceIcon } from "@heroicons/react/24/outline";
import SimpleTooltip from "@/components/ui/simple-tooltip";
import Link from "next/link";
const statusColors = {
online: "bg-green-500",
@ -189,6 +190,7 @@ const Username = ({
);
const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => {
const trackUrl: string = `https://open.spotify.com/track/${spotify.track_id}`;
const startTimestamp: number = spotify.timestamps.start; // Example start timestamp
const endTimestamp: number = spotify.timestamps.end; // Example end timestamp
const [songProgress, setSongProgress] = useState<string | undefined>();
@ -210,22 +212,26 @@ const SpotifyActivity = ({ spotify }: { spotify: Spotify }): ReactElement => {
<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}
/>
<Link href={trackUrl} target="_blank">
<Image
className="rounded-lg"
src={spotify.album_art_url as string}
alt={`Track artwork of ${spotify.song} by ${spotify.artist}`}
width={54}
height={54}
/>
</Link>
{/* Track Info */}
<div className="flex flex-col text-sm">
<h1 className="font-bold leading-none">
{truncateText(spotify.song, 24)}
</h1>
<h2 className="font-light opacity-70">
{truncateText(spotify.artist.replace(";", ","), 26)}
</h2>
<Link href={trackUrl} target="_blank">
<h1 className="font-bold leading-none">
{truncateText(spotify.song, 24)}
</h1>
<h2 className="font-light opacity-70">
{truncateText(spotify.artist.replace(";", ","), 26)}
</h2>
</Link>
<p className="text-xs font-light opacity-70">
{songProgress} / {moment(songDuration).format("m:ss")}
</p>