64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import { Stack, useLocalSearchParams } from "expo-router";
|
|
import { Box } from "@/components/ui/box";
|
|
import { Button, ButtonText } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Heading } from "@/components/ui/heading";
|
|
import { Image } from "@/components/ui/image";
|
|
import { Text } from "@/components/ui/text";
|
|
import { VStack } from "@/components/ui/vstack";
|
|
import { Icon, FavouriteIcon } from "@/components/ui/icon";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { getNoticeById } from "@/api/notices";
|
|
import { ActivityIndicator } from "react-native";
|
|
|
|
export default function NoticeDetails() {
|
|
const { id } = useLocalSearchParams();
|
|
|
|
const {
|
|
data: notice,
|
|
isLoading,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: ["notices", id],
|
|
queryFn: () => getNoticeById(Number(id)),
|
|
});
|
|
|
|
if (isLoading) {
|
|
return <ActivityIndicator />;
|
|
}
|
|
|
|
if (error) {
|
|
return <Text>Błąd, spróbuj ponownie póżniej</Text>;
|
|
}
|
|
|
|
return (
|
|
<Card className="p-0 rounded-lg m-3 flex-1">
|
|
<Stack.Screen options={{ title: notice.title }} />
|
|
<Image
|
|
source={{
|
|
uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
|
|
}}
|
|
className=" h-auto w-full rounded-md aspect-[1/1]"
|
|
alt="image"
|
|
resizeMode="cover"
|
|
/>
|
|
|
|
<VStack className="p-2">
|
|
<Text className="text-sm font-normal mb-2 text-typography-700">
|
|
{notice.title}
|
|
</Text>
|
|
<Box className="flex-row items-center">
|
|
<Heading size="md" className="flex-1">
|
|
{notice.price}zł
|
|
</Heading>
|
|
<Icon
|
|
as={FavouriteIcon}
|
|
size="sm"
|
|
className="text-primary-500 w-6 h-6"
|
|
/>
|
|
</Box>
|
|
</VStack>
|
|
</Card>
|
|
);
|
|
}
|