laba 4

2023-12-22 15:08:57 +04:00 · 2023-12-22 15:08:57 +04:00 · 9c4908c899
commit 9c4908c899
parent 725bc1aac6
37 changed files with 5170 additions and 0 deletions
--- a/lab4/.eslintrc.cjs
+++ b/lab4/.eslintrc.cjs
@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+    'max-len' : 'off',
+    'linebreak-style': 'off',
+  },
+}
--- a/lab4/.gitignore
+++ b/lab4/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/lab4/README.md
+++ b/lab4/README.md
@ -0,0 +1,29 @@
+#### Окружение:
+- nodejs 18;
+- VSCode;
+- ESLint плагин для VSCode;
+- для отладки необходимы бразузеры Chrome или Edge.
+
+#### Создание пустого проекта:
+
+```commandline
+npm create vite@latest ./ -- --template react 
+```
+
+#### Установка зависимостей:
+
+```commandline
+npm install
+```
+
+#### Запуск проекта:
+
+```commandline
+npm run dev
+```
+
+#### Сборка проекта:
+
+```commandline
+npm run build
+```
--- a/lab4/index.html
+++ b/lab4/index.html
@ -0,0 +1,15 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ceramic.studio</title>
+</head>
+
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/lab4/jsconfig.json
+++ b/lab4/jsconfig.json
@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/lab4/package-lock.json
+++ b/lab4/package-lock.json
--- a/lab4/package.json
+++ b/lab4/package.json
@ -0,0 +1,32 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "bootstrap": "^5.3.2",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}
--- a/lab4/public/favicon.svg
+++ b/lab4/public/favicon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
+  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+</svg>
--- a/lab4/src/App.css
+++ b/lab4/src/App.css
--- a/lab4/src/App.jsx
+++ b/lab4/src/App.jsx
@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Navigation from './components/navigation/Navigation.jsx';
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Navigation routes={routes}></Navigation>
+      <Container className='p-2' as="main" fluid>
+        <Outlet />
+      </Container>
+    </>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;
--- a/lab4/src/assets/alone.jpg
+++ b/lab4/src/assets/alone.jpg
--- a/lab4/src/assets/cup.jpg
+++ b/lab4/src/assets/cup.jpg
--- a/lab4/src/assets/cup1.jpg
+++ b/lab4/src/assets/cup1.jpg
--- a/lab4/src/assets/cup2.jpg
+++ b/lab4/src/assets/cup2.jpg
--- a/lab4/src/assets/cuporig.jpg
+++ b/lab4/src/assets/cuporig.jpg
--- a/lab4/src/assets/groups.jpg
+++ b/lab4/src/assets/groups.jpg
--- a/lab4/src/assets/image
+++ b/lab4/src/assets/image
--- a/lab4/src/assets/image
+++ b/lab4/src/assets/image
--- a/lab4/src/assets/image
+++ b/lab4/src/assets/image
--- a/lab4/src/assets/plate.jpg
+++ b/lab4/src/assets/plate.jpg
--- a/lab4/src/assets/plate1.jpg
+++ b/lab4/src/assets/plate1.jpg
--- a/lab4/src/assets/plate2.jpg
+++ b/lab4/src/assets/plate2.jpg
--- a/lab4/src/assets/tarel.jpg
+++ b/lab4/src/assets/tarel.jpg
--- a/lab4/src/components/navigation/Navigation.css
+++ b/lab4/src/components/navigation/Navigation.css
@ -0,0 +1,77 @@
+/* 
+body{
+    background: #f4ecd9;
+}    
+.title {
+    text-align: center;
+    margin-top: 5rem;
+  }
+  .text-center {
+    text-align: center;
+  }
+  img.imageround {
+    margin: 1rem;
+    border-radius: 10%;
+  }
+  .mybutton {
+    background-color: #E0A762;
+    border: 2px solid #E0A762;
+    border-radius: 25px;
+    color: #000000;
+  }
+  .card{
+    padding: 2em;
+    background-color:rgba(234, 166, 63, 0.58);
+    border-radius: 10%;
+    margin-bottom: 1rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+  }
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea {
+  border-radius: 25px;
+  padding: 10px;
+  border: 1px solid #f4ecd9;
+  width: 100%;
+  margin: 0 auto; 
+}
+@media screen and (min-width: 600px) {
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    textarea {
+      width: 50%;
+    }
+  }
+.form-text {
+    margin-top: 30px;
+    text-align: center; 
+  }
+  
+  form {
+    margin-top: 90px;
+    text-align: center;
+  }
+  
+  form div {
+    margin-bottom: 75px;
+  }
+  button[type="submit"] {
+    background-color: #E0A762;
+    border: 2px solid #E0A762;
+    margin-top: 25px;
+    border-radius: 25px;
+  }
+  .AdButton {
+    margin-top: 25px;
+    background-color: #E0A762;
+    border: 2px solid #E0A762;
+    border-radius: 25px;
+    color: #000000;
+  } */
+
--- a/lab4/src/components/navigation/Navigation.jsx
+++ b/lab4/src/components/navigation/Navigation.jsx
@ -0,0 +1,76 @@
+// import { Link } from 'react-router-dom';
+// import { Navbar, Nav, Container } from 'react-bootstrap';
+// import './Navigation.css';
+
+// const Navigation = () => {
+//   return (
+//     <Navbar>
+//       <Container>
+//         <Navbar.Brand as={Link} to="/">
+//           ceramic.studio
+//         </Navbar.Brand>
+//         <Navbar.Toggle aria-controls="basic-navbar-nav" />
+//         <Navbar.Collapse id="basic-navbar-nav">
+//           <Nav className="me-auto">
+//             <Nav.Link as={Link} to="/Page2">
+//               о нас
+//             </Nav.Link>
+//             <Nav.Link as={Link} to="/Page3">
+//               мастер класс
+//             </Nav.Link>
+//             <Nav.Link as={Link} to="/Page4">
+//               связаться с нами
+//             </Nav.Link>
+//           </Nav>
+//         </Navbar.Collapse>
+//       </Container>
+//     </Navbar>
+//   );
+// };
+
+// export default Navigation;
+
+import PropTypes from 'prop-types';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
+import './Navigation.css';
+
+const Navigation = ({ routes }) => {
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false).shift();
+
+    return (
+        <header>
+            <div className='NavigationClass'>
+                <Navbar expand='md' data-bs-theme='light' className='my-navbar'>
+                    <Container fluid>
+                        <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'} className='mx-5'>
+                            ceramic.studio
+                        </Navbar.Brand>
+                        <Navbar.Toggle aria-controls='main-navbar' />
+                        <Navbar.Collapse id='main-navbar'>
+                            <Nav className='me-auto link' activeKey={location.pathname}>
+                            <Nav.Link as={Link} to="/Page2">
+                                о нас
+                            </Nav.Link>
+                            <Nav.Link as={Link} to="/Page3">
+                                мастер класс
+                            </Nav.Link>
+                            <Nav.Link as={Link} to="/Page4">
+                                связаться с нами
+                            </Nav.Link>
+
+                            </Nav>
+                        </Navbar.Collapse>
+                    </Container>
+                </Navbar >
+            </div>
+        </header>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/lab4/src/index.css
+++ b/lab4/src/index.css
@ -0,0 +1,106 @@
+/* h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h3 {
+    font-size: 1.1em;
+}
+
+.btn-mw {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .btn-mw {
+        width: 30%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .btn-mw {
+        width: 20%;
+    }
+} */
+
+/* главная и картинки с закруглениями */
+body{
+    background: #f4ecd9;
+}    
+.title {
+    text-align: center;
+    margin-top: 5rem;
+  }
+  .text-center {
+    text-align: center;
+  }
+  img.imageround {
+    margin: 1rem;
+    border-radius: 10%;
+  }
+/* кнопка 2стр */
+  .mybutton {
+    background-color: #E0A762;
+    border: 2px solid #E0A762;
+    border-radius: 25px;
+    color: #000000;
+  }
+  /* mk */
+  .card{
+    padding: 2em;
+    background-color:rgba(234, 166, 63, 0.58);
+    border-radius: 10%;
+    margin-bottom: 1rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+  }
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea {
+  border-radius: 25px;
+  padding: 10px;
+  border: 1px solid #f4ecd9;
+  width: 100%;
+  margin: 0 auto; /* Центрирует элемент горизонтально */
+}
+@media screen and (min-width: 600px) {
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    textarea {
+      width: 50%;
+    }
+  }
+.form-text {
+    margin-top: 30px;
+    text-align: center; 
+  }
+  
+  form {
+    margin-top: 90px;
+    text-align: center;
+  }
+  
+  form div {
+    margin-bottom: 75px;
+  }
+  button[type="submit"] {
+    background-color: #E0A762;
+    border: 2px solid #E0A762;
+    margin-top: 25px;
+    border-radius: 25px;
+  }
+  .AdButton {
+    margin-top: 25px;
+    background-color: #E0A762;
+    border: 2px solid #E0A762;
+    border-radius: 25px;
+    color: #000000;
+  }
--- a/lab4/src/main.jsx
+++ b/lab4/src/main.jsx
@ -0,0 +1,65 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+import ErrorPage from './pages/ErrorPage.jsx';
+import Page1 from './pages/Page1.jsx';
+import Page2 from './pages/Page2.jsx';
+import Page3 from './pages/Page3.jsx';
+import Page4 from './pages/Page4.jsx';
+import Page4Edit from './pages/Page4Edit.jsx';
+import PageAdmin from './pages/PageAdmin.jsx';
+import PageEdit from './pages/PageEdit.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <Page1 />,
+    title: 'Главная страница',
+  },
+  {
+    path: '/page2',
+    element: <Page2 />,
+    title: 'Вторая страница',
+  },
+  {
+    path: '/page3',
+    element: <Page3 />,
+    title: 'Третья страница',
+  },
+  {
+    path: '/page4',
+    element: <Page4 />,
+    title: 'Четвертая страница',
+  },
+  {
+    path: '/page4-edit',
+    element: <Page4Edit />,
+  },
+  {
+    path: '/page-admin',
+    element: <PageAdmin />,
+  },
+  {
+    path: '/page-edit',
+    element: <PageEdit />,
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={routes} />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
--- a/lab4/src/pages/ErrorPage.jsx
+++ b/lab4/src/pages/ErrorPage.jsx
@ -0,0 +1,19 @@
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Container fluid className="p-2 row justify-content-center">
+            <Container className='col-md-6'>
+                <Alert variant="danger">
+                    Страница не найдена
+                </Alert>
+                <Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;
--- a/lab4/src/pages/Page1.jsx
+++ b/lab4/src/pages/Page1.jsx
@ -0,0 +1,18 @@
+import tarel from '../assets/tarel.jpg';
+import cup from '../assets/cuporig.jpg';
+
+const Page1 = () => {
+    return (
+    <>
+    <div className="title text-center my-5">
+        <h1 style={{ fontSize: '2rem' }}>СТУДИЯ КЕРАМИКИ</h1>
+        <p className="lead text-muted">научим делать керамические изделия</p>
+    </div>
+    <div className="text-center">
+        <img className="imageround" src={tarel} alt="tarel" />
+        <img className="imageround" src={cup} alt="cup" />
+    </div>
+    </>
+    );
+  };
+export default Page1;
--- a/lab4/src/pages/Page2.jsx
+++ b/lab4/src/pages/Page2.jsx
@ -0,0 +1,38 @@
+import { Container, Button } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+import image3 from '../assets/image 3.jpg';
+import image4 from '../assets/image 4.jpg';
+import image5 from '../assets/image 5.jpg';
+
+const Page2 = () => {
+    return (
+        <>
+        <div>
+        <Container className="text-center my-5">
+            <h1>СТУДИЯ КЕРАМИКИ</h1>
+            <p>
+            Добро пожаловать в нашу студию керамики! Мы предлагаем уникальный опыт создания керамических изделий
+            руками с помощью наших опытных инструкторов. Мы проводим мастер-классы для всех возрастов и уровней опыта, от начинающих до продвинутых художников.
+            Мы создали специальную атмосферу, чтобы каждый участник мог наслаждаться творческим процессом
+            и получить максимальное удовольствие от создания своего уникального керамического изделия.
+            </p>
+        </Container>
+        <Container className="text-center my-5">
+            <img className="imageround" src={image3} alt="image3" />
+            <img className="imageround" src={image4} alt="image4" />
+            <img className="imageround" src={image5} alt="image5" />
+        </Container>
+        <Container className="text-center my-5">
+            <Link to="/page3">
+            <Button variant="primary" className="mybutton">
+                мастер-класс
+            </Button>
+            </Link>
+        </Container>
+        </div>
+        </>
+    );
+};
+
+export default Page2;
--- a/lab4/src/pages/Page3.jsx
+++ b/lab4/src/pages/Page3.jsx
@ -0,0 +1,70 @@
+import { Link } from 'react-router-dom';
+import alone from '../assets/alone.jpg';
+import groups from '../assets/groups.jpg';
+
+const Header = () => (
+  <div className="container text-center my-5">
+    <h1>МАСТЕР КЛАССЫ</h1>
+    <p>
+      Добро пожаловать в нашу студию керамики! Мы предлагаем уникальный опыт создания
+      керамических изделий руками с помощью наших опытных инструкторов. Мы проводим
+      мастер-классы для всех возрастов и уровней опыта, от начинающих до продвинутых
+      художников. Мы создали специальную атмосферу, чтобы каждый участник мог наслаждаться
+      творческим процессом и получить максимальное удовольствие от создания своего
+      уникального керамического изделия.
+    </p>
+  </div>
+);
+
+const Card = ({
+    // eslint-disable-next-line react/prop-types
+    image, title, price, description,
+ }) => (
+  <div className="col">
+    <div className="card">
+      <img src={image} className="imageround" alt="KITTI" />
+      <div className="card-body">
+        <h5 className="card-title">{title}</h5>
+        <h6 className="card-title">{price} рублей</h6>
+        <p className="card-text">{description}</p>
+      </div>
+    </div>
+  </div>
+);
+
+const Cards = () => (
+  <div className="container my-5">
+    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-5">
+      <Card
+        image={alone}
+        title="Ручная лепка"
+        price="2600"
+        description="- На этом МК можно создать кружку / миску  / стакан на выбор - МК проходит по выходным в группе - Продолжительность 2,5 часа - Опыт в лепке не нужен - Готовность работ - через 4 недели после МК - До 8 человек в группе"
+      />
+      <Card
+        image={groups}
+        title="Корпоративы"
+        price="от 3200"
+        description="- На этом МК каждый сможет создать кружку / миску на выбор - МК проходит по будням - Продолжительность 2,5 часа - Опыт в лепке не нужен - Готовность работ - через 4 недели после МК - Сумма расчитывается от количества человек"
+      />
+    </div>
+  </div>
+);
+
+const RegisterButton = () => (
+  <div className="container text-center my-5 mx-auto">
+    <Link to="/page4" className="btn mybutton">
+      Записаться
+    </Link>
+  </div>
+);
+
+const Page3 = () => (
+  <div>
+    <Header />
+    <Cards />
+    <RegisterButton />
+  </div>
+);
+
+export default Page3;
--- a/lab4/src/pages/Page4.jsx
+++ b/lab4/src/pages/Page4.jsx
@ -0,0 +1,40 @@
+// eslint-disable-next-line no-unused-vars
+import React from 'react';
+import { Link } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const Page4 = () => {
+    return (
+        <>
+           <div className="form-text">
+          <h1>Регистрация</h1>
+          <h5>Заполни форму регистрации, чтобы записаться на мастер класс и мы с тобой свяжемся!<br />
+            В сообщении укажи вариант мастер класса.</h5>
+        </div>
+
+        <form method="post">
+          <div className="form-group">
+            <label htmlFor="name">Фамилия Имя</label>
+            <input type="text" name="name" id="name" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="email">Электронный адрес</label>
+            <input type="email" name="email" id="email" required />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="sms">Сообщение</label>
+            <textarea name="message" id="sms"></textarea>
+          </div>
+
+          <button type="submit">Отправить данные</button>
+          <Link to="/page-admin" className="btn mybutton1">
+            Админ
+          </Link>
+        </form>
+        </>
+    );
+};
+
+export default Page4;
--- a/lab4/src/pages/Page4Edit.jsx
+++ b/lab4/src/pages/Page4Edit.jsx
@ -0,0 +1,29 @@
+import { Button, ButtonGroup, Table } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const Page4 = () => {
+    return (
+        <>
+            <ButtonGroup>
+                <Button as={Link} to="/page-edit" variant="success">Добавить товар (страница)</Button>
+            </ButtonGroup>
+            <Table className="mt-2" striped>
+                <thead>
+                    <tr>
+                        <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>
+                        <th scope="col"></th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default Page4;
--- a/lab4/src/pages/PageAdmin.jsx
+++ b/lab4/src/pages/PageAdmin.jsx
@ -0,0 +1,57 @@
+import { Container, Button, Table } from 'react-bootstrap';
+
+const PageAdmin = () => {
+    return (
+    <>
+        <Container className="text-center my-5">
+      <h1>Просмотр заявок</h1>
+      <Table>
+        <thead>
+          <tr>
+            <th scope="col" width="200" height="100">
+              ФИО
+            </th>
+            <th scope="col" width="200">
+              Электронный адрес
+            </th>
+            <th scope="col" width="200">
+              Сообщение
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row" height="70">Чубыкина Полина Павловна</th>
+            <td>chubykina@mail.ru</td>
+            <td>Записываюсь на МК ручная лепка</td>
+          </tr>
+          <tr>
+            <th scope="row" height="70"></th>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <th scope="row" height="70"></th>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <th scope="row" height="70"></th>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <th scope="row" height="70"></th>
+            <td></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </Table>
+      <Button href="/page4-edit" variant="primary" className="mybutton">
+        Редактирование
+      </Button>
+    </Container>
+    </>
+    );
+  };
+export default PageAdmin;
--- a/lab4/src/pages/PageEdit.jsx
+++ b/lab4/src/pages/PageEdit.jsx
@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const PageEdit = () => {
+    const [validated, setValidated] = useState(false);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        setValidated(true);
+    };
+
+    return (
+        <>
+             <div className="text-center">
+                <img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
+                    alt="placeholder" />
+            </div>
+            <Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2">
+                    <Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
+                    <Form.Select id="item" name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Label htmlFor="price">Цена</Form.Label>
+                    <Form.Control id="price" type="number" name="price"
+                        defaultValue="0.00" min="1000.00" step="0.50" required />
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Label htmlFor="count">Количество</Form.Label>
+                    <Form.Control id="count" type="number" name="count"
+                        defaultValue="0" min="1" step="1" required />
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Label htmlFor="image">Изображение</Form.Label>
+                    <Form.Control id="image" type="file" name="image" accept="image/*" />
+                </Form.Group>
+                <Form.Group className="d-flex flex-md-row flex-column justify-content-center">
+                <Button className="AdButton btn-mw me-md-3" as={Link} to="/page4" variant="primary">Назад</Button>
+                <Button className="AdButton btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
+                </Form.Group>
+            </Form>
+        </>
+    );
+};
+
+export default PageEdit;
--- a/lab4/vite.config.js
+++ b/lab4/vite.config.js
@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});
--- a/lab4/Отчет
+++ b/lab4/Отчет