63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
import { Box } from "@/components/ui/box";
|
|
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 { Link } from "expo-router";
|
|
import { Pressable } from "react-native";
|
|
import { useWishlist } from "@/store/wishlistStore";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
export function NoticeCard({ notice }) {
|
|
const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
|
|
const removeNoticeFromWishlist = useWishlist(
|
|
(state) => state.removeNoticeFromWishlist
|
|
);
|
|
const isInWishlist = useWishlist((state) =>
|
|
state.wishlistNotices.some((item) => item.noticeId == notice.noticeId)
|
|
);
|
|
|
|
return (
|
|
<Link href={`/notice/${notice.noticeId}`} asChild>
|
|
<Pressable className="flex-1">
|
|
<Card className="p-0 rounded-lg max-w-[460px] flex-1">
|
|
<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>
|
|
<Pressable
|
|
onPress={() => {
|
|
if (isInWishlist) {
|
|
removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
|
|
} else {
|
|
addNoticeToWishlist(notice); // Dodaj do ulubionych
|
|
}
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
|
|
size={24} // Rozmiar ikony
|
|
color={"primary-heading-500"} // Kolor ikony
|
|
/>
|
|
</Pressable>
|
|
</Box>
|
|
</VStack>
|
|
</Card>
|
|
</Pressable>
|
|
</Link>
|
|
);
|
|
}
|