Create Product Quickviews using React and Tailwind CSS

// App.js

import React, { useState } from 'react';
import './index.css'; // Ensure Tailwind is imported

const products = [
    { id: 1, name: 'Product 1', price: '$20.00', 
    image: 'https://via.placeholder.com/150',
    description: 'This is a great product.' },
    { id: 2, name: 'Product 2', price: '$30.00', 
    image: 'https://via.placeholder.com/150', 
    description: 'This is an even better product.' },
    { id: 3, name: 'Product 3', price: '$40.00', 
    image: 'https://via.placeholder.com/150', 
    description: 'This is an amazing product.' },
    { id: 4, name: 'Product 4', price: '$50.00', 
    image: 'https://via.placeholder.com/150', 
    description: 'This is the best product.' },


];

const App = () => {
    const [selectedProduct, setSelectedProduct] = useState(null);
    const [cart, setCart] = useState([]);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [productToCancel, setProductToCancel] = useState(null);

    const handleAddToCart = (product) => {
        setCart([...cart, product.id]);
        setSelectedProduct(null); // Close modal
    };

    const handleConfirmCancel = () => {
        setCart(cart.filter(id => id !== productToCancel.id));
        setIsModalOpen(false);
        setProductToCancel(null);
    };

    const ProductCard = ({ product }) => {
        const isInCart = cart.includes(product.id);

        const handleCancelProduct = (product) => {
            setProductToCancel(product);
            setIsModalOpen(true);
        };

        return (
            <div className="bg-white shadow-lg rounded-lg p-4 
            cursor-pointer transition-transform transform hover:scale-105 w-80 h-80">
                <img src={product.image} alt={product.name} 
                className="w-full h-40 object-cover rounded-md" />
                <h2 className="mt-2 text-lg font-semibold">{product.name}</h2>
                <p className="text-gray-500">{product.price}</p>
                {!isInCart ? (
                    <button
                        className="mt-2 w-full bg-green-500 
                        text-white p-2 rounded-md hover:bg-blue-600 transition"
                        onClick={() => {
                            handleAddToCart(product);
                            setSelectedProduct(product);
                        }}
                    >
                        Add to Cart
                    </button>
                ) : (
                    <button
                        className="mt-2 w-full bg-red-500 text-white 
                        p-2 rounded-md hover:bg-red-600 transition"
                        onClick={() => handleCancelProduct(product)}
                    >
                        Cancel
                    </button>
                )}
            </div>
        );
    };

    const QuickviewModal = () => (
        <div className="fixed inset-0 bg-black bg-opacity-50 
        flex items-center justify-center z-50">
            <div className="bg-white rounded-lg shadow-lg p-6 w-96">
                <button onClick={() => setSelectedProduct(null)} 
                className="absolute top-2 right-2 text-gray-600 hover:text-gray-800">
                    ✕
                </button>
                {selectedProduct && (
                    <>
                        <img src={selectedProduct.image} alt={selectedProduct.name} 
                        className="w-full h-48 object-cover rounded-md" />
                        <h2 className="mt-2 text-xl font-semibold">{selectedProduct.name}
                        </h2>
                        <p className="text-gray-500">{selectedProduct.price}</p>
                        <p className="mt-2">{selectedProduct.description}</p>
                        <button className="mt-4 w-full bg-green-500 text-white p-2 
                        rounded-md hover:bg-blue-600 transition" onClick={() => 
                        handleAddToCart(selectedProduct)}>
                            Add to Cart
                        </button>
                    </>
                )}
            </div>
        </div>
    );

    return (
        <div className="min-h-screen bg-gray-100 flex flex-col items-center 
        justify-center p-5 mb-5">
            <h1 className="text-4xl font-bold mb-10">Product Quickview</h1>
            <div className="grid grid-cols-4 gap-6">
                {products.map(product => (
                    <ProductCard key={product.id} product={product} />
                ))}
            </div>
            {selectedProduct && <QuickviewModal />}
            {isModalOpen && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex 
                items-center justify-center z-50">
                    <div className="bg-white rounded-lg shadow-lg p-6 w-96">
                        <h2 className="text-xl font-semibold">Confirm Cancellation</h2>
                        <p className="mt-2">Are you sure you want to remove 
                        {productToCancel?.name} from the cart?</p>
                        <div className="mt-4 flex justify-between">
                            <button className="bg-red-500 text-white p-2 
                            rounded-md hover:bg-red-600 transition" 
                            onClick={handleConfirmCancel}>
                                Yes, Cancel
                            </button>
                            <button className="bg-gray-300 text-gray-700 p-2 
                            rounded-md hover:bg-gray-400 transition" onClick={() => 
                            setIsModalOpen(false)}>
                                No, Keep
                            </button>
                        </div>
                    </div>
                </div>
            )}

        </div>
    );
};

export default App;