Начало таблицы абитурентов

Lab5/src/components/Directions/Direction.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+const Direction = ({ index }) => {
+    return (
+        <tr>
+            <th scope="row">{index + 1}</th>
+            <td>dcvs</td>
+            <td>fvdf</td>
+            <td>5nhghgn</td>
+            <td>,l/asxxc</td>
+        </tr>
+    );
+};
+
+Direction.propTypes = {
+    index: PropTypes.number,
+};
+
+export default Direction;

Lab5/src/components/Directions/DirectionsApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../api/ApiService';
+
+const LinesApiService = new ApiService('directions');
+
+export default LinesApiService;

Lab5/src/components/Directions/TableDirect.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+
+const TableDirect = ({ children }) => {
+    return (
+        <Table className='mt-1' striped responsive>
+            <thead>
+                <tr>
+                    <th scope = 'col'>№</th>
+                    <th scope='col' className = "w-25">Код</th>
+                    <th scope='col' className ="w-50">Направление</th>
+                    <th scope='col' className ="w-25">Кафедра</th>
+                    <th scope='col' className = "w-75">Предметы(ЕГЭ) по выбору</th>
+                </tr>
+            </thead>
+            <tbody>
+                {children}
+            </tbody >
+        </Table >
+    );
+};
+
+TableDirect.propTypes = {
+    children: PropTypes.node,
+};
+
+export default TableDirect;

Lab5/src/pages/Page3.jsx

@@ -1,7 +1,26 @@
+import TableDirect from '../components/Directions/TableDirect.jsx';
+import Direction from '../components/Directions/Direction.jsx';
+import directionsApiService from '../components/Directions/DirectionsApiService';
+
+const data = directionsApiService.getAll();
 const Page3 = () => {
     return (
-            <div className='row justify-content-center'>
+        <>
+            <div className = 'd-flex justify-content-center mb-4'>
+                <input className = "d-flex justify-content-center w-50"
+                    type="search"
+                    id="search1"
+                    name="search"
+                    required>
+                </input>
             </div>
+            <div className = 'd-flex justify-content-center'>
+                <TableDirect>
+                    <Direction key={0}
+                            index={0}></Direction>
+                </TableDirect>
+            </div>
+        </>
     );
 };