55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { ActivityIndicator, FlatList, Image, Text, View } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
import { RideCard } from "@/components/ride-card";
|
|
import { images } from "@/constants";
|
|
import { useFetch } from "@/lib/fetch";
|
|
import { useT } from "@/lib/i18n";
|
|
import { useTheme } from "@/lib/theme";
|
|
import type { Ride } from "@/types/type";
|
|
|
|
const Rides = () => {
|
|
const { data: recentRides, loading } = useFetch<Ride[]>("/(api)/ride/list");
|
|
const { isDark } = useTheme();
|
|
const t = useT();
|
|
|
|
return (
|
|
<SafeAreaView className="bg-general-500 dark:bg-neutral-950">
|
|
<FlatList
|
|
data={recentRides}
|
|
renderItem={({ item }) => <RideCard ride={item} />}
|
|
className="px-5"
|
|
keyboardShouldPersistTaps="handled"
|
|
contentContainerStyle={{
|
|
paddingBottom: 100,
|
|
}}
|
|
ListEmptyComponent={
|
|
<View className="flex flex-col items-center justify-center">
|
|
{!loading ? (
|
|
<>
|
|
<Image
|
|
source={images.noResult}
|
|
alt={t("rides.noRecentAlt")}
|
|
className="w-40 h-40"
|
|
resizeMode="contain"
|
|
/>
|
|
<Text className="text-sm text-black dark:text-white">
|
|
{t("rides.noRecent")}
|
|
</Text>
|
|
</>
|
|
) : (
|
|
<ActivityIndicator size="small" color={isDark ? "#fff" : "#000"} />
|
|
)}
|
|
</View>
|
|
}
|
|
ListHeaderComponent={
|
|
<Text className="text-2xl font-JakartaBold my-5 text-black dark:text-white">
|
|
{t("rides.allRides")}
|
|
</Text>
|
|
}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
export default Rides; |