add more components

react-app/src/components/universe/universe-list.js

@@ -0,0 +1,57 @@
+import { Component } from "react";
+
+import UniverseItem from "../universe-item/universe-item";
+import searchLogo from "./img/search.svg";
+
+class UniverseList extends Component {
+    state = {};
+
+    render() {
+        const { data, picturesList, onUniverseProps } = this.props;
+
+        //Генерация университетов из списка на основе пропсов
+        const universes = data.map((item) => {
+            const { id, ...itemProps } = item;
+
+            return (
+                <UniverseItem
+                    key={id}
+                    pic={picturesList[id - 1]}
+                    {...itemProps}
+                    onUniverseProps={(e) => onUniverseProps(e)}
+                />
+            );
+        });
+
+        return (
+            <section className="universe">
+                <div className="container container_flex">
+                    <div className="row">
+                        <div className="universe_input_block col-md-12">
+                            <input
+                                type="text"
+                                className="universe_input"
+                                placeholder="Введите название вуза или суза..."
+                            />
+                            <img
+                                src={searchLogo}
+                                alt="search"
+                                className="universe_search"
+                            />
+                        </div>
+                        {universes}
+                    </div>
+                </div>
+                {/* Переключение активного слайдера в зависимости от секции */}
+                <div className="universe_slid">
+                    <span className="universe_slid_active"></span>
+                    <span className="universe_slid_disable"></span>
+                    <span className="universe_slid_disable"></span>
+                    <span className="universe_slid_disable"></span>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default UniverseList;