ТаблицаАбитуриентов. Готовая

Lab5/data.json

@@ -3,7 +3,7 @@
     {
       "id": 0,
       "code": "01.03.04",
-      "name": "Мат. Моделирование",
+      "name": "Математическое Моделирование",
       "department": "Прикладная математика",
       "things": "Иностранный язык, информатика, физика, химия"
     },
@@ -20,6 +20,62 @@
       "name": "Информационные системы и технологии",
       "department": "Измерительно-вычислительные комплексы",
       "things": "Информатика, физика"
+    },
+    {
+      "id": 3,
+      "code": "09.03.03",
+      "name": "Прикладная информатика",
+      "department": "Информационные системы",
+      "things": "Иностранный язык, информатика, физика, химия"
+    },
+    {
+      "id": 4,
+      "code": "07.03.03",
+      "name": "Дизайн архитектурной среды",
+      "department": "Архитектурно-строительное проектирование",
+      "things": "НЕТ"
+    },
+    {
+      "id": 5,
+      "code": "38.03.04",
+      "name": "Государственное и муниципальное управление",
+      "department": "Экономика и менеджмент",
+      "things": "География, иностранный язык, информатика, история, обществознание"
+    },
+    {
+      "id": 6,
+      "code": "38.03.01",
+      "name": "Экономика",
+      "department": "Экономическая теория",
+      "things": "География, иностранный язык, информатика, история, обществознание"
+    },
+    {
+      "id": 7,
+      "code": "12.03.01",
+      "name": "Приборостроение",
+      "department": "Измерительно-вычислительные комплексы",
+      "things": "Иностранный язык, информатика, физика"
+    },
+    {
+      "id": 8,
+      "code": "27.03.02",
+      "name": "Управление качеством",
+      "department": "Управление в технических системах",
+      "things": "Информатика, физика"
+    },
+    {
+      "id": 9,
+      "code": "22.03.01",
+      "name": "Материаловедение и технологии материалов",
+      "department": "Химия и технологии композиционных материалов",
+      "things": "Иностранный язык, информатика, физика, химия"
+    },
+    {
+      "id": 10,
+      "code": "24.03.04",
+      "name": "Авиастроение",
+      "department": "Самолетостроение",
+      "things": "Иностранный язык, информатика, физика, химия"
     }
   ],
   "lines": [

Lab5/src/components/Directions/direct/Directions.jsx

@@ -1,31 +1,36 @@
 import { Search } from 'react-bootstrap-icons';
+import { useState } from 'react';
 import { Button } from 'react-bootstrap';
 import TableDirect from './TableDirect.jsx';
 import Direction from './Direction.jsx';
 import useDirections from '../hooks/DirectionHooks';
+import Input from '../../input/Input.jsx';
 
 const Directions = () => {
     const { directions } = useDirections();
+    const [searchValue, setSearchValue] = useState('');
 
     return (
         <>
             <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>
-                <Button style = {{ marginLeft: '5' }} ><Search /></Button>
+                <Input className = 'd-flex justify-content-center w-50' name='search' value = {searchValue} onChange={(e) => setSearchValue(e.target.value)}
+                type='text' required />
+                <Button style = {{ marginLeft: '5' }} onClick={() => console.log(searchValue)} ><Search /></Button>
             </div>
             <div className = 'd-flex justify-content-center'>
                 <TableDirect>
-                    {
-                        directions.map((item) =>
-                            <Direction key={item.id}
-                                item = {item}
-                            />)
-                    }
+                {
+                    directions.map((item) => {
+                        if (searchValue === ''
+                            || item.name.toLowerCase().includes(searchValue.toLowerCase())
+                            || item.department.toLowerCase().includes(searchValue.toLowerCase())
+                            || item.things.toLowerCase().includes(searchValue.toLowerCase())
+                            || item.code.toLowerCase().includes(searchValue.toLowerCase())) {
+                            return <Direction key={item.id} item={item} />;
+            }
+            return null;
+        })
+    }
                 </TableDirect>
             </div>
         </>

Lab5/src/components/Directions/direct/TableDirect.jsx

@@ -7,8 +7,8 @@ const TableDirect = ({ children }) => {
             <thead>
                 <tr>
                     <th style = {{ textAlign: 'center' }} scope = 'col'>№</th>
-                    <th style = {{ textAlign: 'center' }} scope='col' className = "w-25">Код</th>
-                    <th style = {{ textAlign: 'center' }} scope='col' className ="w-50">Направление</th>
+                    <th style = {{ textAlign: 'center' }} scope='col'>Код</th>
+                    <th style = {{ textAlign: 'center' }} scope='col' className ="w-25">Направление</th>
                     <th style = {{ textAlign: 'center' }} scope='col' className ="w-25">Кафедра</th>
                     <th style = {{ textAlign: 'center' }} scope='col' className = "w-75">Предметы(ЕГЭ) по выбору</th>
                 </tr>
@@ -17,7 +17,7 @@ const TableDirect = ({ children }) => {
                 {children}
             </tbody >
         </Table >
-    );
+);
 };
 
 TableDirect.propTypes = {