lab4 some minor fixes

ReactLibrary/src/components/navigation/Navigation.jsx

@@ -10,7 +10,7 @@ const Navigation = ({ routes }) => {
     const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
     return (
         <header>
-            <Navbar expand='md' bg='light' data-bs-theme='light' className='my-navbar'>
+            <Navbar expand='lg' bg='light' data-bs-theme='light' className='my-navbar'>
                 <Container fluid>
                     <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'} className='logo'>
                         <BookHalf className='d-inline-block align-top me-1 logoImage' />
@@ -18,7 +18,7 @@ const Navigation = ({ routes }) => {
                     </Navbar.Brand>
                     <Navbar.Toggle aria-controls='main-navbar' />
                     <Navbar.Collapse id='main-navbar'>
-                        <Nav className='me-auto link' activeKey={location.pathname}>
+                        <Nav className='ms-auto link' activeKey={location.pathname}>
                             {
                                 pages.map((page) =>
                                     <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
@@ -28,7 +28,7 @@ const Navigation = ({ routes }) => {
                         </Nav>
                     </Navbar.Collapse>
                 </Container>
-            </Navbar >
+            </Navbar>
         </header>
     );
 };

ReactLibrary/src/main.jsx

@@ -18,6 +18,8 @@ import LoginPage from './pages/LoginPage.jsx';
 import BookEdit from './pages/BookEdit.jsx';
 import CategoryEdit from './pages/CategoryEdit.jsx';
 import AuthorEdit from './pages/AuthorEdit.jsx';
+import SearchForm from './pages/SearchForm.jsx';
+import SearchResults from './pages/SearchResults.jsx';
 
 const routes = [
   {
@@ -36,6 +38,11 @@ const routes = [
     element: <UserPage/>,
     title: 'Личный кабинет',
   },
+  {
+    path: '/search-form',
+    element: <SearchForm/>,
+    title: 'Поиск',
+  },
   {
     path: '/admin-page',
     element: <AdminPage/>,
@@ -76,6 +83,10 @@ const routes = [
     path: '/author-edit',
     element: <AuthorEdit/>,
   },
+  {
+    path: '/search-results',
+    element: <SearchResults/>,
+  },
 ];
 
 const router = createBrowserRouter([

ReactLibrary/src/pages/AuthorEdit.jsx

@@ -49,7 +49,7 @@ const AuthorEdit = () => {
                 </Form.Group>
                 <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
                     <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
-                    <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+                    <Button className="lib-btn" type="submit">Сохранить</Button>
                 </div>
             </Form>
         </>

ReactLibrary/src/pages/BookEdit.jsx

@@ -46,7 +46,7 @@ const BookEdit = () => {
                 </Form.Group>
                 <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
                     <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
-                    <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+                    <Button className="lib-btn" type="submit">Сохранить</Button>
                 </div>
             </Form>
         </>

ReactLibrary/src/pages/CategoryEdit.jsx

@@ -29,7 +29,7 @@ const CategoryEdit = () => {
                 </Form.Group>
                 <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
                     <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
-                    <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+                    <Button className="lib-btn" type="submit">Сохранить</Button>
                 </div>
             </Form>
         </>

ReactLibrary/src/pages/MainPage.jsx

@@ -16,7 +16,7 @@ const MainPage = () => {
             </p>
             <div className="d-grid gap-2 mt-2 d-md-flex justify-content-md-start">
                 <Button as={Link} to="/user-page" className='lib-btn'>Личный кабинет</Button>
-                <Button as={Link} to="/search" className='lib-btn'>Поиск</Button>
+                <Button as={Link} to="/search-form" className='lib-btn'>Поиск</Button>
             </div>
         </>
     );

ReactLibrary/src/pages/SearchForm.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const SearchForm = () => {
+    const [validated, setValidated] = useState(false);
+    const navigate = useNavigate();
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setValidated(true);
+    };
+    return (
+        <>
+            <h1 className='mt-2 text-center'>
+                Параметры поиска.
+            </h1>
+            <Form id="books-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2" controlId="author">
+                    <Form.Label htmlFor="author" className="form-label">Автор</Form.Label>
+                    <Form.Select name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="name">
+                    <Form.Label>Название</Form.Label>
+                    <Form.Control type="text" name="name" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="category">
+                    <Form.Label htmlFor="category" className="form-label">Категория</Form.Label>
+                    <Form.Select name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
+                    <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+                    <Button className="lib-btn" type="submit">Поиск</Button>
+                </div>
+            </Form>
+        </>
+    );
+};
+
+export default SearchForm;

ReactLibrary/src/pages/SearchResults.jsx

@@ -0,0 +1,28 @@
+import { Button, Table } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const SearchResults = () => {
+const navigate = useNavigate();
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                Результаты поиска.
+            </h1>
+            <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+            <Table className="mt-2 lib-table" striped>
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" className="w-25">Автор</th>
+                    <th scope="col" className="w-25">Название</th>
+                    <th scope="col" className="w-25">Категория</th>
+                    <th scope="col" className="w-25">Год издания</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default SearchResults;