homework/React Dz/my-app/src/App.js

import { useState } from 'react';
import './App.css';

const LoginForm = () => {
  const [login, setLogin] = useState('')
  const [password, setPassword] =  useState('')
      const onLogin = () => {
        return !(login !== '' && password !== '')
      }
        const Vhod = () => alert('Конгратюлатион')

      return(

        <div className = 'loginForm'>
            <strong>Введите ваш логин : </strong>
            <input type = 'text'
                    value = {login}
                      onChange = { (e) => setLogin(e.target.value)}
            />
            <strong> Введите ваш пароль : </strong>
            <input type = 'password'
                    value = {password}
                      onChange = { (e) => setPassword(e.target.value) }
            />
            
            <button disabled = {onLogin()} onClick = {Vhod}

            >Вход</button>
        </div>
      )
}



const rootCats =[
  {
    'name': 'Tools'
  },
  {
    'name': 'Tomatoes'
  },
  {
    'name': 'Smartphone'
  },
  {
    'name': 'Garden'
  },
  {
    'name': 'Childrens products'
  },
  {
    'name': 'Hobbies and sports'
  },
  {
    'name': 'Sale'
  }
]

const cats = [
    {'_id' : '62d403fbb74e1f5f2ec1a12a',
    'name' : 'Виски Glengoyne 50yo 0,725 л',
    'price': 1250,
    },

    {'_id' : '62d40566b74e1f5f2ec1a12c',
    'name' : 'LONGINES HYDROCONQUEST L3.781.4.56.9',
    'price': 5600,
    },
    
    {'_id' : '62d40618b74e1f5f2ec1a12e',
    'name' : 'Лобзик электрический JS08-100A',
    'price': 780,
    },
]
const CategoryMenuItem = ({name}) =>{
  return(
        <div className ="menuItem">
            <strong>{name}</strong>
        </div>
)}

const CategoryMenu = () =>
    <aside className ='aside'>
        <ul>
            {rootCats.map(cats => <CategoryMenuItem name = {cats.name} />)}
        </ul>
    </aside>

const GoodCard = ({catsis:{_id, name, price}}) =>
<div className ="divCats">
  <li className ="kartochki">
      <p>Id: {_id}</p>
      <h1>{name}</h1>
      <strong>Price: {price}</strong>
  </li>
  </div>

const Category  = () =>
  <main className = 'main'>
        <ul>
          {cats.map(catsis=> <GoodCard catsis ={catsis} />)}
        </ul>
  </main>







function App() {
  return (
    <div className="App">
        <LoginForm />
          <div className ='shop'>
            <CategoryMenu />
            <Category />
          </div>
        
    </div>
  );
}


export default App;