App.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import logo from "./logo.svg";
  2. import React, { useState } from "react";
  3. import "./App.css";
  4. const LoginForm = () => {
  5. const [login, setLogin] = useState("");
  6. const [password, setPassword] = useState("");
  7. const onLogin = () => {
  8. return !(login !== "" && password.match(/\w{8,30}$/))
  9. };
  10. const Authorization = () => {
  11. return alert("Welcome, authorization was successful")
  12. }
  13. return (
  14. <div className="formBlock">
  15. <p>Enter login:</p>
  16. <input
  17. type="text"
  18. value={login}
  19. onChange={(e) => setLogin(e.target.value)}
  20. />
  21. <p>Enter password:</p>
  22. <input
  23. type="password"
  24. value={password}
  25. onChange={(e) => setPassword(e.target.value)}
  26. />
  27. <button disabled={onLogin()} onClick = {Authorization}>Log In</button>
  28. </div>
  29. );
  30. };
  31. const cat = [
  32. {
  33. "_id": "62d57ab8b74e1f5f2ec1a148",
  34. "name": "Motorola Razr 5G 8/256GB Graphite",
  35. "price": 3500,
  36. },
  37. {
  38. "_id": "62d57c4db74e1f5f2ec1a14a",
  39. "name": "Смартфон Google Pixel 6 Pro 12/128GB Stormy Black",
  40. "price": 2800,
  41. },
  42. {
  43. "_id": "62d58318b74e1f5f2ec1a14e",
  44. "name": "Microsoft Surface Duo 2 8GB/256GB",
  45. "price": 4500,
  46. },
  47. {
  48. "_id": "62d5869bb74e1f5f2ec1a150",
  49. "name": "Смартфон Poco F3 6/128GB EU Arctic White",
  50. "price": 1800,
  51. },
  52. {
  53. "_id": "62d58810b74e1f5f2ec1a152",
  54. "name": "Мобильный телефон Xiaomi Redmi Note 9 4G (Redmi 9t EU)",
  55. "price": 800,
  56. },
  57. {
  58. "_id": "62d5a7deb74e1f5f2ec1a154",
  59. "name": "LG V50 black REF",
  60. "price": 900,
  61. }
  62. ]
  63. const rootCats = [
  64. {
  65. "name": "test3"
  66. },
  67. {
  68. "name": "Tools"
  69. },
  70. {
  71. "name": "Tomatoes"
  72. },
  73. {
  74. "name": "123"
  75. },
  76. {
  77. "name": "iPhone"
  78. },
  79. {
  80. "name": "Samsung"
  81. },
  82. {
  83. "name": "Smartphone"
  84. },
  85. {
  86. "name": "Large home appliances"
  87. },
  88. {
  89. "name": "Garden"
  90. },
  91. {
  92. "name": "Children's products"
  93. },
  94. {
  95. "name": " Hobbies and sports"
  96. },
  97. {
  98. "name": "Sale"
  99. }
  100. ]
  101. const CategoryMenu = () => {
  102. return (
  103. <>
  104. <aside id='aside'>
  105. <ul>
  106. {rootCats.map(cat => <CategoryMenuItem name={cat.name}/>)}
  107. </ul>
  108. </aside>
  109. </>
  110. );
  111. };
  112. const CategoryMenuItem = ({name}) => {
  113. return (
  114. <>
  115. <h2>{name}</h2>
  116. </>
  117. );
  118. };
  119. const Category = () => {
  120. return (
  121. <div className="cardBlock">
  122. {cat.map(item => <GoodCard name={item.name} price={item.price}/>)}
  123. </div>
  124. );
  125. };
  126. const GoodCard = ({name, price}) => {
  127. return (
  128. <div className='card'>
  129. <h3>{name}</h3>
  130. <h4>{price}</h4>
  131. </div>
  132. );
  133. };
  134. function App() {
  135. return (
  136. <div className="App">
  137. <LoginForm />
  138. <CategoryMenu />
  139. <Category />
  140. </div>
  141. );
  142. }
  143. export default App;