import React, { useState } from 'react'; interface ProductShade { id: number; name: string; description: string; price: string; shade: string; images: string[]; } const ProductGallery = () => { const [selectedShade, setSelectedShade] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); // Sample product data const productShades: ProductShade[] = [ { id: 1, name: "Classic Rose", description: "A timeless pink shade that complements all skin tones. Perfect for everyday wear.", price: "$24.99", shade: "#F8A5C2", images: ["1", "2", "3"] }, { id: 2, name: "Berry Bliss", description: "Rich berry tone for a bold, confident look. Long-lasting formula.", price: "$26.99", shade: "#5F3DC4", images: ["1", "2", "3"] }, { id: 3, name: "Coral Crush", description: "Vibrant coral shade that adds warmth to your complexion. Great for summer.", price: "$25.99", shade: "#FF7979", images: ["1", "2", "3"] }, { id: 4, name: "Nude Essence", description: "Natural nude tone that enhances your lips without overpowering them.", price: "$23.99", shade: "#D5A38A", images: ["1", "2", "3"] }, { id: 5, name: "Ruby Red", description: "Classic red with a modern twist. Perfect for special occasions.", price: "$27.99", shade: "#E84393", images: ["1", "2", "3"] }, { id: 6, name: "Mauve Magic", description: "Soft mauve shade for a sophisticated, understated look.", price: "$24.99", shade: "#B33771", images: ["1", "2", "3"] } ]; const openModal = (shade: ProductShade) => { setSelectedShade(shade); setIsModalOpen(true); document.body.style.overflow = 'hidden'; // Prevent background scrolling }; const closeModal = () => { setIsModalOpen(false); setSelectedShade(null); document.body.style.overflow = 'auto'; // Re-enable scrolling }; return (

Premium Lipstick Collection

Discover our curated range of shades designed to complement every skin tone and style preference.

{productShades.map((shade) => (

openModal(shade)} >

{shade.name}

{shade.price}

{shade.description}

))}

{/* Modal */} {isModalOpen && selectedShade && (

e.stopPropagation()} >

{selectedShade.name}

{selectedShade.price}

{[1, 2, 3].map((img) => (

))}

Shade Preview

{selectedShade.name}

{selectedShade.description}

Features

✓ Long-lasting formula (up to 8 hours)
✓ Enriched with vitamin E and jojoba oil
✓ Cruelty-free and vegan
✓ Available in 12 stunning shades

)}

); }; export default ProductGallery;

г. Москва, ул. Золоторожский Вал, 11с22, офис 373,
9:00 – 19:00

8 800 533 8618

Где купить

Контакты

О компании

Партнерам

г. Москва, ул. Золоторожский Вал, 11с22, офис 373
9:00 – 19:00

8 800 533 8618

О компании

Где купить

Партнерам

Контакты

г. Москва, ул. Золоторожский Вал, 11с22, офис 373

Zero Block

Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.

Tilda Publishing

create your own block from scratch