Gucci

[marioruggeri8019-maker]

<title>iMe Mini Shop</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://telegram.org/js/telegram-web-app.js"></script> <style> body { --tg-color: var(--tg-theme-button-color, #2481cc); } .btn-tg { background-color: var(--tg-color); } </style>

<!-- React via ESM: Moderno, veloce, standard-based -->
<script type="module">
    import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
    import ReactDOM from 'https://esm.sh/react-dom@18.2.0/client';

    const PRODUCTS = [
        { id: 1, name: 'LIME Token Pack', price: 10, icon: '💎' },
        { id: 2, name: 'iMe Premium 1M', price: 5, icon: '🌟' },
        { id: 3, name: 'Custom Sticker', price: 2, icon: '🎨' },
    ];

    function App() {
        const [cart, setCart] = useState([]);
        const tg = window.Telegram.WebApp;

        useEffect(() => {
            tg.ready();
            tg.expand(); // Espande la Mini App a tutto schermo
        }, []);

        const addToCart = (product) => {
            const newCart = [...cart, product];
            setCart(newCart);
            
            // Mostra il pulsante principale di Telegram per il checkout
            tg.MainButton.text = `Paga $${newCart.reduce((a, b) => a + b.price, 0)}`;
            tg.MainButton.show();
        };

        // Gestione click su pulsante principale Telegram
        tg.onEvent('mainButtonClicked', () => {
            tg.showAlert(`Ordine inviato! Totale: $${cart.reduce((a, b) => a + b.price, 0)}`);
            tg.close(); // Chiude la mini app dopo l'acquisto
        });

        return React.createElement('div', { className: 'p-4' }, [
            React.createElement('h1', { className: 'text-2xl font-bold mb-6 text-center' }, 'iMe Mini Shop'),
            React.createElement('div', { className: 'grid gap-4' }, PRODUCTS.map(p => (
                React.createElement('div', { key: p.id, className: 'bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex justify-between items-center' }, [
                    React.createElement('div', null, [
                        React.createElement('span', { className: 'text-2xl mr-3' }, p.icon),
                        React.createElement('span', { className: 'font-medium' }, p.name),
                        React.createElement('p', { className: 'text-sm text-gray-500' }, `$${p.price}`)
                    ]),
                    React.createElement('button', {
                        onClick: () => addToCart(p),
                        className: 'btn-tg text-white px-4 py-2 rounded-lg font-bold'
                    }, 'Aggiungi')
                ])
            )))
        ]);
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(React.createElement(App));
</script>