Генерация скриншотов приложения для доставки еды на React Native

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recommendedRestaurants: [],
      searchQuery: '',
      selectedRestaurant: null,
      cart: [],
      order: null,
      user: null
    };
  }

  componentDidMount() {
    // Fetch data from 1C and WordPress
    this.fetchRecommendedRestaurants();
  }

  fetchRecommendedRestaurants = () => {
    // Mock data for recommended restaurants
    const mockData = [
      {
        id: 1,
        name: 'Restaurant A',
        logo: 'https://placehold.co/100X100',
        description: 'A great place to eat.',
        menu: [
          { id: 1, name: 'Dish 1', price: 10, description: 'Delicious dish 1' },
          { id: 2, name: 'Dish 2', price: 15, description: 'Delicious dish 2' }
        ]
      },
      {
        id: 2,
        name: 'Restaurant B',
        logo: 'https://placehold.co/100X100',
        description: 'Another great place to eat.',
        menu: [
          { id: 3, name: 'Dish 3', price: 12, description: 'Delicious dish 3' },
          { id: 4, name: 'Dish 4', price: 18, description: 'Delicious dish 4' }
        ]
      }
    ];
    this.setState({ recommendedRestaurants: mockData });
  };

  handleSearch = (query) => {
    this.setState({ searchQuery: query });
  };

  selectRestaurant = (restaurant) => {
    this.setState({ selectedRestaurant: restaurant });
  };

  addToCart = (item) => {
    this.setState((prevState) => ({
      cart: [...prevState.cart, item]
    }));
  };

  placeOrder = () => {
    const order = {
      id: Date.now(),
      items: this.state.cart,
      total: this.state.cart.reduce((sum, item) => sum + item.price, 0)
    };
    this.setState({ order, cart: [] });
  };

  render() {
    return (
      <div className="App">
        <header className="bg-blue-500 text-white p-4">
          <h1 className="text-2xl">Food Delivery App</h1>
          <input
            type="text"
            placeholder="Search restaurants..."
            className="mt-2 p-2 text-black"
            onChange={(e) => this.handleSearch(e.target.value)}
          />
        </header>

        <main className="p-4">
          <section className="mb-8">
            <h2 className="text-xl mb-4">Recommended Restaurants</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {this.state.recommendedRestaurants.map((restaurant) => (
                <div
                  key={restaurant.id}
                  className="border p-4 rounded-lg cursor-pointer"
                  onClick={() => this.selectRestaurant(restaurant)}
                >
                  <img src={restaurant.logo} alt={restaurant.name} className="w-full h-32 object-cover mb-2" />
                  <h3 className="text-lg font-semibold">{restaurant.name}</h3>
                  <p className="text-sm">{restaurant.description}</p>
                </div>
              ))}
            </div>
          </section>

          {this.state.selectedRestaurant && (
            <section className="mb-8">
              <h2 className="text-xl mb-4">{this.state.selectedRestaurant.name} Menu</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {this.state.selectedRestaurant.menu.map((item) => (
                  <div key={item.id} className="border p-4 rounded-lg">
                    <h3 className="text-lg font-semibold">{item.name}</h3>
                    <p className="text-sm">{item.description}</p>
                    <p className="text-sm">Price: ${item.price}</p>
                    <button
                      className="mt-2 bg-blue-500 text-white px-4 py-2 rounded"
                      onClick={() => this.addToCart(item)}
                    >
                      Add to Cart
                    </button>
                  </div>
                ))}
              </div>
            </section>
          )}

          <section className="mb-8">
            <h2 className="text-xl mb-4">Cart</h2>
            {this.state.cart.length > 0 ? (
              <div>
                {this.state.cart.map((item, index) => (
                  <div key={index} className="border p-4 rounded-lg mb-2">
                    <h3 className="text-lg font-semibold">{item.name}</h3>
                    <p className="text-sm">Price: ${item.price}</p>
                  </div>
                ))}
                <button
                  className="mt-2 bg-green-500 text-white px-4 py-2 rounded"
                  onClick={this.placeOrder}
                >
                  Place Order
                </button>
              </div>
            ) : (
              <p>Your cart is empty.</p>
            )}
          </section>

          {this.state.order && (
            <section className="mb-8">
              <h2 className="text-xl mb-4">Order Details</h2>
              <div className="border p-4 rounded-lg">
                <p>Order ID: {this.state.order.id}</p>
                <p>Total: ${this.state.order.total}</p>
              </div>
            </section>
          )}
        </main>

        <footer className="bg-gray-800 text-white p-4">
          <p>© 2025 Food Delivery App. All rights reserved.</p>
        </footer>
      </div>
    );
  }
}

export default App;