init wishlist, zustand and tanstack

ArtisanConnect/app/notice/[id].jsx

@@ -0,0 +1,63 @@
+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>
+  );
+}