Spotify Card

1"use client";
2 
3import { useState, useEffect, useRef } from "react";
4import { SiSpotify } from "@icons-pack/react-simple-icons";
5import { cn } from "@/lib/utils";
6 
7interface SpotifyData {
8  title: string;
9  artist: string;
10  image: string;
11  link: string;
12  audio?: string;
13}
14 
15interface SpotifyCardProps {
16  url: string;
17  className?: string;
18}
19 
20const SpotifyCardSkeleton = ({ className }: { className?: string }) => (
21  <div
22    className={cn(
23      "relative flex max-h-[100px] h-full w-full items-stretch justify-center overflow-hidden rounded-2xl border border-border bg-muted/50 p-3",
24      className
25    )}
26  >
27    <div className="aspect-square w-full max-w-[75px] animate-pulse self-center rounded-lg bg-muted" />
28    <div className="z-10 flex w-full flex-col justify-end">
29      <div className="flex flex-col items-end gap-1 pl-6">
30        <div className="h-4 w-24 animate-pulse rounded bg-muted" />
31        <div className="h-4 w-16 animate-pulse rounded bg-muted" />
32      </div>
33    </div>
34  </div>
35);
36 
37const SpotifyCardError = ({ className }: { className?: string }) => (
38  <div
39    className={cn(
40      "flex h-[100px] w-full items-center justify-center rounded-2xl border border-border bg-muted/50 p-6 text-muted-foreground",
41      className
42    )}
43  >
44    <p className="text-sm">Failed to load Spotify data</p>
45  </div>
46);
47 
48export function SpotifyCard({ url, className }: SpotifyCardProps) {
49  const [data, setData] = useState<SpotifyData | null>(null);
50  const [isLoading, setIsLoading] = useState(true);
51  const [error, setError] = useState(false);
52  const [isPlaying, setIsPlaying] = useState(false);
53  const audioRef = useRef<HTMLAudioElement | null>(null);
54 
55  useEffect(() => {
56    const fetchSpotifyData = async () => {
57      try {
58        setIsLoading(true);
59        setError(false);
60 
61        const response = await fetch(
62          `/api/spotify?url=${encodeURIComponent(url)}`
63        );
64 
65        if (!response.ok) {
66          throw new Error("Failed to fetch");
67        }
68 
69        const spotifyData = await response.json();
70        setData(spotifyData);
71      } catch {
72        setError(true);
73      } finally {
74        setIsLoading(false);
75      }
76    };
77 
78    fetchSpotifyData();
79  }, [url]);
80 
81  useEffect(() => {
82    return () => {
83      if (audioRef.current) {
84        audioRef.current.pause();
85      }
86    };
87  }, []);
88 
89  const handlePlayPause = () => {
90    if (!data?.audio) return;
91 
92    if (!audioRef.current) {
93      audioRef.current = new Audio(data.audio);
94// … truncated