From 518474319ceae8260ca87bfba6e69bdd635a3906 Mon Sep 17 00:00:00 2001
From: ellawaal <ellawaal@icloud.com>
Date: Wed, 9 Sep 2026 16:33:17 +0200
Subject: [PATCH] Implementert henting av sangtekst via useQuery

---
 src/components/SongCard.tsx |  6 +++++-
 src/hooks/useLyrics.ts      | 13 +++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useLyrics.ts

diff --git a/src/components/SongCard.tsx b/src/components/SongCard.tsx
index c316aa7..d2b2d01 100644
--- a/src/components/SongCard.tsx
+++ b/src/components/SongCard.tsx
@@ -1,10 +1,14 @@
 import type { Song } from '../data/songs'
+import { useLyrics } from '../hooks/useLyrics'
 
 type SongCardProps = {
   song: Song
 }
 
 export function SongCard({ song }: SongCardProps) {
+
+  const { data } = useLyrics(song.artist, song.title)
+  
   return (
     <article>
       <h2>{song.title}</h2>
@@ -12,7 +16,7 @@ export function SongCard({ song }: SongCardProps) {
       <p>{song.album}</p>
 
       <div>
-        <p>Teksten vises her</p>
+        <p>{data?.lyrics}</p>
       </div>
 
       <div>
diff --git a/src/hooks/useLyrics.ts b/src/hooks/useLyrics.ts
new file mode 100644
index 0000000..3b2045f
--- /dev/null
+++ b/src/hooks/useLyrics.ts
@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+
+export function useLyrics(artist: string, title: string) {
+
+    const url = `https://api.lyrics.ovh/v1/${encodeURIComponent(artist)}/${encodeURIComponent(title)}`
+
+    const { data, isLoading, error } = useQuery({
+    queryKey: ['lyrics', artist, title],  
+    queryFn: () => fetch(url).then((res) => res.json())
+    })
+
+    return {data, isLoading, error}
+}
\ No newline at end of file