Quick Commerce Card

1import React from 'react';
2import { StyleSheet, View, Text, Image, TouchableOpacity, Dimensions } from 'react-native';
3import { Heart, Plus } from 'lucide-react-native';
4
5const { width } = Dimensions.get('window');
6// Scaled down to fit roughly 3.5 cards on screen
7export const CARD_WIDTH = width * 0.28;
8
9export interface Product {
10    id: string;
11    name: string;
12    unit: string;
13    price: number;
14    mrp: number;
15    discount: string;
16    image: string;
17}
18
19const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
20    return (

import React, { useState, useCallback } from 'react';
import {
    SafeAreaView, StyleSheet, Text, View, FlatList,
    ScrollView, Image, TouchableOpacity
} from 'react-native';
import ProductCard, { Product, CARD_WIDTH } from './components/ProductCard';

const CATEGORIES = [
    { id: '1', name: 'All Items', icon: '❤️' },
    { id: '2', name: 'Zepto Cafe', image: 'https://cdn-icons-png.flaticon.com/512/3170/3170733.png' },
    { id: '3', name: 'Fruits & Veg', image: 'https://cdn-icons-png.flaticon.com/512/2329/2329865.png' },
    { id: '4', name: 'Snacks', image: 'https://cdn-icons-png.flaticon.com/512/2553/2553691.png' },
    { id: '5', name: 'Drinks', image: 'https://cdn-icons-png.flaticon.com/512/2405/2405479.png' },
];

const MOCK_DATA: Product[] = [
    {
        id: '1',
        name: "Cheese Balls Crunch",
        unit: '60 g',