Умный кулинарный помощник

import React, { useState } from 'react';

function App() {
  const [recipes, setRecipes] = useState([]);
  const [portions, setPortions] = useState(2);
  const [searchTerm, setSearchTerm] = useState('');
  const [shoppingList, setShoppingList] = useState([]);

  const handlePortionChange = (event,practice

  return (
    <div className='flex flex-col items-center justify-center min-h-screen bg-gray-100'>
      {/* Header Section */}
      <header className='w-full bg-gradient-to-r from-green-400 to-blue-500 py-6 px-4 text-center'>
        <h1 className='text-4xl font-bold text-white'>Smart Kitchen Helper</h1>
        <p className='text-lg text-gray-200'>Your personal culinary assistant</p>
      </header>

      {/* Recipe Search Section */}
      <section className='bg-white p-6 rounded-lg shadow-md mt-6 w-full max-w-md'>
        <input
          type='text'
          placeholder='Search for recipes...'
          className='w-full p-2 border border-gray-300 rounded mb-4'
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button className='w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600'>Search</button>
      </section>

      {/* Portion Control Section */}
      <section className='bg-white p-6 rounded-lg shadow-md mt-6 w-full max-w-md'>
        <h2 className='text-xl font-semibold mb-4'>Adjust Portions</h2>
        <input
          type='number'
          className='w-full p-2 border border-gray-300 rounded'
          value={portions}
          onChange={(e) => setPortions(Number(e.target.value))}
        />
      </section>

      {/* Recipe List Section */}
      <section className='bg-white p-6 rounded-lg shadow-md mt-6 w-full max-w-4xl'>
        <h2 className='text-xl font-semibold mb-4'>Recipes</h2>
        <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
          {recipes.map((recipe) => (
            <div key={recipe.id} className='bg-gray-50 p-4 rounded-lg'>
              <img src={recipe.image} alt={recipe.name} className='w-full h-32 object-cover rounded-lg' />
              <h3 className='font-semibold mt-2'>{recipe.name}</h3>
            </div>
          ))}
        </div>
      </section>

      {/* Ingredient Substitutions Section */}
      <section className='bg-white p-6 rounded-lg shadow-md mt-6 w-full max-w-4xl'>
        <h2 className='text-xl font-semibold mb-4'>Ingredient Substitutions</h2>
        <p className='text-gray-600'>Suggestions for ingredient replacements will appear here.</p>
      </section>

      {/* Shopping List Section */}
      <section className='bg-white p-6 rounded-lg shadow-md mt-6 w-full max-w-4xl'>
        <h2 className='text-xl font-semibold mb-4'>Shopping List</h2>
        <ul className='list-disc pl-5'>
          {shoppingList.map((item) => (
            <li key={item} className='text-gray-600'>{item}</li>
          ))}
        </ul>
      </section>

      {/* Footer Section */}
      <footer className='w-full bg-gray-800 py-6 px-4 mt-6 text-center'>
        <p className='text-gray-400'>© 2025 Smart Kitchen Helper. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;