getting favorite artists plumbed through

components/Artists/component.tsx

@@ -1,9 +1,38 @@
+import { useFavoriteArtists } from "@/api/queries/favorites";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useApiClientContext } from "../jellyfin-api-provider";
+import React from "react";
+import { FlatList } from "react-native";
+import { ItemCard } from "../Global/helpers/item-card";
+import { ArtistsProps } from "../types";
+
+export default function Artists({ navigation }: ArtistsProps): React.JSX.Element {
+
+    const { apiClient, library } = useApiClientContext();
+    const { data: artists } = useFavoriteArtists(apiClient!, library!.musicLibraryId);
 
-export default function Artists(): React.JSX.Element {
     return (
         <SafeAreaView edges={["left", "right"]}>
-            
+            <FlatList
+                data={artists}
+                renderItem={({ index, item: artist}) => {
+                    return (
+                        <ItemCard
+                            artistName={artist.Name!}
+                            itemId={artist.Id!}
+                            caption={artist.Name ?? "Unknown Artist"}
+                            onPress={() => {
+                                navigation.navigate("Artist",
+                                    {
+                                        artistId: artist.Id!,
+                                        artistName: artist.Name!
+                                    }
+                                )
+                            }}
+                        />
+                    )
+                }}
+            />
         </SafeAreaView>
     )
 }

components/Artists/screen.tsx

@@ -9,9 +9,9 @@ export default function ArtistsScreen({
     navigation
 } : {
     route: RouteProp<StackParamList, "Artists">,
-    navigation: NativeStackNavigationProp<StackParamList>
+    navigation: NativeStackNavigationProp<StackParamList, "Artists", undefined>
 }) : React.JSX.Element {
     return (
-        <Artists />
+        <Artists route={route} navigation={navigation}/>
     )
 }