srf

src/App.tsx

@@ -1,18 +1,19 @@
 import React, { useRef, useState } from "react";
-import { Button, CardGroup, Container, FormControl, FormGroup, FormLabel, Row } from "react-bootstrap";
+import { Button, Card, Container, FormControl, FormGroup, FormLabel, Row } from "react-bootstrap";
 import client from "./ApiClient";
+import { Band } from "./Types";
 
 function App() {
     const searchRef = useRef<HTMLInputElement>(null);
 
-    const [bands, setBands] = useState<any[]>([]);
+    const [bands, setBands] = useState<Band[]>([]);
 
     const search = () => {
         const input = searchRef.current?.value;
         if (!input) {
             return;
         }
-        client.searchBand(input).then((res) => setBands(res.bands));
+        client.searchBand(input).then((res) => setBands(res));
     };
 
     return (
@@ -25,10 +26,22 @@ function App() {
                 <Button onClick={search}>Search</Button>
             </Row>
             <Row>
-                <CardGroup>{bands && bands.map((band) => <div>{band}</div>)}</CardGroup>
+                {bands &&
+                    bands.map((band) => (
+                        <Card style={{ width: "18rem" }} key={band.uid}>
+                            <Card.Img variant="top" src={band.url_for_image_original} />
+                            <Card.Title>{band.name}</Card.Title>
+                            <Card.Body>{getBioText(band)}</Card.Body>
+                        </Card>
+                    ))}
             </Row>
         </Container>
     );
 }
 
+function getBioText(band: Band): string {
+    const bio = band.biographies.find((bio) => bio.lang === "de") || band.biographies[0];
+    return bio?.description || "Keine Biographie angegeben.";
+}
+
 export default App;