kirukib
5391780b9b
Replace the profile tab with prescription management (inline reminders and family invite), add a shared tab top bar, separate notifications from orders, and support any-branch guest checkout with GSH codes. Co-authored-by: Cursor <cursoragent@cursor.com>
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import { router } from "expo-router";
|
|
import { FlatList, useWindowDimensions, View } from "react-native";
|
|
import { useTranslation } from "react-i18next";
|
|
import { EmptyState } from "@/components/ui/EmptyState";
|
|
import { ProductCard, GRID_CARD_GAP } from "@/components/ui/ProductCard";
|
|
import { Screen, TAB_BAR_INSET } from "@/components/ui/Screen";
|
|
import { TabTopBar } from "@/components/ui/TabTopBar";
|
|
import { Text } from "@/components/ui/Text";
|
|
import { products } from "@/lib/data/products";
|
|
import { routes } from "@/lib/routes";
|
|
import { useFavoritesStore } from "@/lib/stores/favoritesStore";
|
|
import { colors, gutter } from "@/lib/theme";
|
|
|
|
export default function FavoritesScreen() {
|
|
const { t } = useTranslation();
|
|
const ids = useFavoritesStore((s) => s.ids);
|
|
const items = products.filter((p) => ids.includes(p.id));
|
|
const { width } = useWindowDimensions();
|
|
const cardWidth = (width - gutter * 2 - GRID_CARD_GAP) / 2;
|
|
|
|
return (
|
|
<Screen>
|
|
<TabTopBar subtitle={t("common.favorites")} />
|
|
<View style={{ paddingHorizontal: gutter, paddingBottom: 8 }}>
|
|
<Text variant="h1">{t("common.favorites")}</Text>
|
|
<Text variant="bodySm" color={colors.subtle} style={{ marginTop: 4 }}>
|
|
Saved products for quick reorder
|
|
</Text>
|
|
</View>
|
|
{items.length === 0 ? (
|
|
<EmptyState
|
|
icon="heart-outline"
|
|
title={t("common.emptyFavorites")}
|
|
body="Tap the heart on any product to save it here."
|
|
actionTitle="Browse shop"
|
|
onAction={() => router.push(routes.shop)}
|
|
/>
|
|
) : (
|
|
<FlatList
|
|
data={items}
|
|
numColumns={2}
|
|
keyExtractor={(i) => i.id}
|
|
columnWrapperStyle={{ gap: GRID_CARD_GAP }}
|
|
contentContainerStyle={{
|
|
paddingHorizontal: gutter,
|
|
paddingTop: 12,
|
|
paddingBottom: TAB_BAR_INSET + 24,
|
|
gap: GRID_CARD_GAP,
|
|
}}
|
|
renderItem={({ item }) => <ProductCard product={item} width={cardWidth} />}
|
|
/>
|
|
)}
|
|
</Screen>
|
|
);
|
|
}
|