solved

app/(tabs)/_layout.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Tabs } from "expo-router";
+
+const layout = () => {
+	return (
+		<Tabs screenOptions={{ HeaderShown: false }}>
+			<Tabs.Screen name="trips" />
+			<Tabs.Screen name="stays" />
+		</Tabs>
+	);
+};
+
+export default layout;
+
+const styles = StyleSheet.create({});

app/(tabs)/stays/StayIndex.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import Searchbar from "@/component/Searchbar";
+import Line from "@/component/Line";
+import StaysList from "@/component/StaysList";
+import stays from "@/data/stays";
+
+const StayIndex = () => {
+	const [search, setSearch] = useState("");
+	const displayStays = stays.filter((stay) => stay.name.toLowerCase().includes(search.toLowerCase()));
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Explore Stays</Text>
+			<Searchbar setSearch={setSearch} />
+			<View
+				style={{
+					flexDirection: "row",
+					gap: 10,
+					paddingLeft: 10,
+					paddingRight: 10,
+				}}>
+				<Line width={"50%"} color="#1abc9c" />
+				<Line width={"50%"} color="#1abc9c" />
+			</View>
+
+			<StaysList stays={displayStays} />
+		</View>
+	);
+};
+
+export default StayIndex;
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+	},
+	text: {
+		fontSize: 20,
+		fontWeight: "bold",
+		textAlign: "center",
+		marginTop: 10,
+	},
+
+	line: {
+		borderWidth: 1,
+		borderColor: "white",
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+		width: "90%",
+		height: 10,
+		marginTop: 20,
+	},
+	textContainer: {
+		padding: 20,
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+	},
+});

app/(tabs)/stays/[StayDetails].tsx

@@ -0,0 +1,42 @@
+import { Image, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import stays from "@/data/stays";
+import { useLocalSearchParams } from "expo-router";
+
+const StayDetails = () => {
+	const { StayDetails } = useLocalSearchParams();
+	const stay = stays.find((item) => `${item.id}` === StayDetails);
+	return (
+		<View style={styles.container}>
+			<Text style={styles.name}>{stay?.name}</Text>
+			<Image source={{ uri: stay?.img }} style={styles.image} />
+			<Text style={styles.text}>Location: {stay?.location}</Text>
+			<Text style={styles.text}>Price: ${stay?.price} / night</Text>
+			<Text style={styles.text}>Rating: {stay?.rating} / 5</Text>
+		</View>
+	);
+};
+
+export default StayDetails;
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+		padding: 20,
+		gap: 10,
+		alignItems: "center",
+	},
+	image: {
+		width: "100%",
+		height: 200,
+		borderRadius: 10,
+	},
+	name: {
+		fontSize: 20,
+		fontWeight: "bold",
+	},
+	text: {
+		fontSize: 16,
+	},
+});

app/(tabs)/stays/_layout.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Stack } from "expo-router";
+
+const layout = () => {
+	return <Stack />;
+};
+
+export default layout;
+
+const styles = StyleSheet.create({});

app/(tabs)/trips/TripIndex.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import Searchbar from "@/component/Searchbar";
+import Line from "@/component/Line";
+import TripList from "@/component/TripList";
+import trips from "@/data/trips";
+
+const TripIndex = () => {
+	const [search, setSearch] = useState("");
+	const displaytrips = trips.filter((trip) => trip.name.toLowerCase().includes(search.toLowerCase()));
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Explore trips</Text>
+			<Searchbar setSearch={setSearch} />
+			<View
+				style={{
+					flexDirection: "row",
+					gap: 10,
+					paddingLeft: 10,
+					paddingRight: 10,
+				}}>
+				<Line width={"50%"} color="#1abc9c" />
+				<Line width={"50%"} color="#1abc9c" />
+			</View>
+
+			<TripList trips={displaytrips} />
+		</View>
+	);
+};
+
+export default TripIndex;
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+	},
+	text: {
+		fontSize: 20,
+		fontWeight: "bold",
+		textAlign: "center",
+		marginTop: 10,
+	},
+
+	line: {
+		borderWidth: 1,
+		borderColor: "white",
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+		width: "90%",
+		height: 10,
+		marginTop: 20,
+	},
+	textContainer: {
+		padding: 20,
+		borderRadius: 10,
+		alignItems: "center",
+		backgroundColor: "white",
+	},
+});

app/(tabs)/trips/[TripDetails].tsx

@@ -0,0 +1,53 @@
+import { Image, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import trips from "@/data/trips";
+import { Link, useLocalSearchParams } from "expo-router";
+
+const TripDetails = () => {
+	const { TripDetails } = useLocalSearchParams();
+	const trip = trips.find((item) => item.slug === TripDetails);
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>{trip?.name}</Text>
+			<Image source={{ uri: trip?.img }} style={styles.image} />
+			<View style={styles.infoContainer}>
+				<Text style={styles.description}>City: {trip?.city}</Text>
+				<Text style={styles.description}>Length: {trip?.length1}KM</Text>
+				<Text style={styles.description}>Difficulty: {trip?.difficulty}</Text>
+				<Text style={styles.description}>Rating: {trip?.rating}</Text>
+			</View>
+
+			<Text style={styles.description}>{trip?.details}</Text>
+		</View>
+	);
+};
+
+export default TripDetails;
+
+const styles = StyleSheet.create({
+	container: {
+		padding: 10,
+		backgroundColor: "white",
+		flex: 1,
+	},
+	image: {
+		width: "100%",
+		height: 200,
+		borderRadius: 10,
+		marginBottom: 10,
+	},
+	title: {
+		fontSize: 20,
+		fontWeight: "bold",
+		marginBottom: 10,
+		textAlign: "center",
+	},
+	description: {
+		fontSize: 16,
+		marginBottom: 10,
+		textAlign: "center",
+	},
+	infoContainer: {
+		marginBottom: 10,
+	},
+});

app/(tabs)/trips/_layout.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Stack } from "expo-router";
+
+const layout = () => {
+	return <Stack />;
+};
+
+export default layout;
+
+const styles = StyleSheet.create({});

app/(tabs)/trips/index.tsx

@@ -0,0 +1,46 @@
+import DifficultyFilter from "@/component/DifficultyFilter";
+import Line from "@/component/Line";
+import Searchbar from "@/component/Searchbar";
+import TripList from "@/component/TripList";
+import trips from "@/data/trips";
+import { useState } from "react";
+import { Text, View, StyleSheet } from "react-native";
+
+export default function Index() {
+	const [search, setSearch] = useState("");
+	const displayTrips = trips.filter((trip) => trip.name.toLowerCase().includes(search.toLowerCase()));
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.text}>Explore Trips</Text>
+			<Searchbar setSearch={setSearch} />
+
+			<DifficultyFilter />
+
+			<View
+				style={{
+					flexDirection: "row",
+					gap: 10,
+					paddingLeft: 10,
+					paddingRight: 10,
+				}}>
+				<Line width={"50%"} color="#1abc9c" />
+				<Line width={"50%"} color="#1abc9c" />
+			</View>
+			<TripList trips={displayTrips} />
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "white",
+	},
+	text: {
+		fontSize: 20,
+		fontWeight: "bold",
+		textAlign: "center",
+		marginTop: 10,
+	},
+});