Add screens to search stack

components/Home/component.tsx

@@ -72,7 +72,7 @@ export default function Home(): React.JSX.Element {
                             headerShown: false,
                             presentation: "modal"
                         }}
-                        />
+                    />
                 </HomeStack.Group>
             </HomeStack.Navigator>
         </HomeProvider>

components/Search/screen.tsx

@@ -0,0 +1,17 @@
+import { RouteProp } from "@react-navigation/native";
+import { StackParamList } from "../types";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import React from "react";
+import Search from "./component";
+
+export default function SearchScreen({
+    route,
+    navigation
+} : {
+    route: RouteProp<StackParamList>,
+    navigation: NativeStackNavigationProp<StackParamList>
+}) : React.JSX.Element {
+    return (
+        <Search navigation={navigation} />
+    )
+}

components/Search/stack.tsx

@@ -0,0 +1,70 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import SearchScreen from "./screen";
+import { StackParamList } from "../types";
+import { ArtistScreen } from "../Artist/screens";
+import { AlbumScreen } from "../Album/screens";
+import { PlaylistScreen } from "../Playlist/screens";
+import DetailsScreen from "../ItemDetail/screen";
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+export default function SearchStack() : React.JSX.Element {
+    return (
+        <Stack.Navigator>
+            <Stack.Screen
+                name="Search"
+                component={SearchScreen}
+                options={{
+                    headerLargeTitle: true,
+                    headerLargeTitleStyle: {
+                        fontFamily: 'Aileron-Bold'
+                    }
+                }}
+            />
+
+            <Stack.Group>
+                <Stack.Screen 
+                    name="Artist" 
+                    component={ArtistScreen} 
+                    options={({ route }) => ({
+                        title: route.params.artist.Name ?? "Unknown Artist",
+                        headerLargeTitle: true,
+                        headerLargeTitleStyle: {
+                            fontFamily: 'Aileron-Bold'
+                        }
+                    })}
+                />
+
+                <Stack.Screen
+                    name="Album"
+                    component={AlbumScreen}
+                    options={({ route }) => ({
+                        headerShown: true,
+                        headerTitle: ""
+                    })}
+                />
+
+                <Stack.Screen
+                    name="Playlist"
+                    component={PlaylistScreen}
+                    options={({ route }) => ({
+                        headerShown: true,
+                        headerTitle: ""
+                    })}
+                />
+
+            </Stack.Group>
+
+            <Stack.Group screenOptions={{ presentation: "modal"}}>
+                <Stack.Screen
+                    name="Details"
+                    component={DetailsScreen}
+                    options={{
+                        headerShown: false,
+                        presentation: "modal"
+                    }}
+                />
+            </Stack.Group>
+        </Stack.Navigator>
+    )
+}