Lag statisk SongCard-komponent

src/App.tsx

@@ -0,0 +1,12 @@
+import { SongCard } from "./components/SongCard";
+import { songs } from "./data/songs"
+
+function App() {
+  return (
+    <main>
+      <SongCard song={songs[0]} />
+    </main>
+  )
+}
+
+export default App

src/components/SongCard.tsx

@@ -0,0 +1,23 @@
+import type { Song } from '../data/songs'
+
+type SongCardProps = {
+  song: Song
+}
+
+export function SongCard({ song }: SongCardProps) {
+  return (
+    <article>
+      <h2>{song.title}</h2>
+      <p>{song.artist}</p>
+
+      <div>
+        <p>Teksten vises her</p>
+      </div>
+
+      <div>
+        <p>Bilde vises her</p>
+      </div>
+
+    </article>
+  )
+}

src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import './index.css'
+import App from './App.tsx'
+
+const queryClient = new QueryClient()
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+)