|
@@ -0,0 +1,159 @@
|
|
|
+import React, {useState} from 'react';
|
|
|
+import './App.css';
|
|
|
+
|
|
|
+const LoginForm = ({onLogin}) => {
|
|
|
+ const [login, setLogin] = useState("");
|
|
|
+ const [password, setPassword] = useState("");
|
|
|
+
|
|
|
+ const checkDisabled = () => {
|
|
|
+ return !(login !== "" && password !== "")
|
|
|
+ };
|
|
|
+
|
|
|
+ const Authorization = () => {
|
|
|
+ onLogin (login, password)
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="formBlock">
|
|
|
+ <p>Enter login:</p>
|
|
|
+
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ value={login}
|
|
|
+ onChange={(e) => setLogin(e.target.value)}
|
|
|
+ />
|
|
|
+ <p>Enter password:</p>
|
|
|
+ <input
|
|
|
+ type="password"
|
|
|
+ value={password}
|
|
|
+ onChange={(e) => setPassword(e.target.value)}
|
|
|
+ />
|
|
|
+ <button disabled={checkDisabled()} onClick = {Authorization}>Log In</button>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const cat = [
|
|
|
+ {
|
|
|
+ "_id": "62d57ab8b74e1f5f2ec1a148",
|
|
|
+ "name": "Motorola Razr 5G 8/256GB Graphite",
|
|
|
+ "price": 3500,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "_id": "62d57c4db74e1f5f2ec1a14a",
|
|
|
+ "name": "Смартфон Google Pixel 6 Pro 12/128GB Stormy Black",
|
|
|
+ "price": 2800,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "_id": "62d58318b74e1f5f2ec1a14e",
|
|
|
+ "name": "Microsoft Surface Duo 2 8GB/256GB",
|
|
|
+ "price": 4500,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "_id": "62d5869bb74e1f5f2ec1a150",
|
|
|
+ "name": "Смартфон Poco F3 6/128GB EU Arctic White",
|
|
|
+ "price": 1800,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "_id": "62d58810b74e1f5f2ec1a152",
|
|
|
+ "name": "Мобильный телефон Xiaomi Redmi Note 9 4G (Redmi 9t EU)",
|
|
|
+ "price": 800,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "_id": "62d5a7deb74e1f5f2ec1a154",
|
|
|
+ "name": "LG V50 black REF",
|
|
|
+ "price": 900,
|
|
|
+
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const rootCats = [
|
|
|
+ {
|
|
|
+ "name": "test3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Tools"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Tomatoes"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "123"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "iPhone"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Samsung"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Smartphone"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Large home appliances"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Garden"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Children's products"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": " Hobbies and sports"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "Sale"
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const CategoryMenu = () => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <aside id='aside'>
|
|
|
+ <ul>
|
|
|
+ {rootCats.map(cat => <CategoryMenuItem name={cat.name}/>)}
|
|
|
+ </ul>
|
|
|
+ </aside>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const CategoryMenuItem = ({name}) => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <h2>{name}</h2>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const Category = () => {
|
|
|
+ return (
|
|
|
+ <div className="cardBlock">
|
|
|
+ {cat.map(item => <GoodCard name={item.name} price={item.price}/>)}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const GoodCard = ({name, price}) => {
|
|
|
+ return (
|
|
|
+ <div className='card'>
|
|
|
+ <h3>{name}</h3>
|
|
|
+ <h4>{price}</h4>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+function App() {
|
|
|
+ return (
|
|
|
+ <div className="App">
|
|
|
+ <LoginForm onLogin = {(login, password) => console.log(login, password)}/>
|
|
|
+ <CategoryMenu />
|
|
|
+ <Category />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+export default App;
|