Готовая лаба 4

2023-12-22 14:54:54 +04:00 · 2023-12-22 14:54:54 +04:00 · e928832056
commit e928832056
parent 1a58717dfc
31 changed files with 5320 additions and 0 deletions
--- a/laba4/.eslintrc.cjs
+++ b/laba4/.eslintrc.cjs
@ -0,0 +1,25 @@
+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',
+    'linebreak-style': 'off'
+  },
+}
--- a/laba4/.gitignore
+++ b/laba4/.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/laba4/README.md
+++ b/laba4/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/laba4/index.html
+++ b/laba4/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>Cake shop</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/laba4/jsconfig.json
+++ b/laba4/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/laba4/package-lock.json
+++ b/laba4/package-lock.json
--- a/laba4/package.json
+++ b/laba4/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/laba4/public/favicon.svg
+++ b/laba4/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/laba4/src/App.css
+++ b/laba4/src/App.css
--- a/laba4/src/App.jsx
+++ b/laba4/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/laba4/src/assets/about_us.png
+++ b/laba4/src/assets/about_us.png
--- a/laba4/src/assets/cake.png
+++ b/laba4/src/assets/cake.png
--- a/laba4/src/assets/dad.png
+++ b/laba4/src/assets/dad.png
--- a/laba4/src/assets/ellipse.png
+++ b/laba4/src/assets/ellipse.png
--- a/laba4/src/assets/mam.png
+++ b/laba4/src/assets/mam.png
--- a/laba4/src/assets/podruge.png
+++ b/laba4/src/assets/podruge.png
--- a/laba4/src/components/navigation/Navigation.css
+++ b/laba4/src/components/navigation/Navigation.css
@ -0,0 +1,62 @@
+ @import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
+.Container {
+  line-height: 90px;
+}
+
+.my-navbar {
+  background-color: #90604C !important;
+  backdrop-filter: blur(10px);
+  color: #FFF6EC;
+  max-width: 300vw;
+}
+
+.my-navbar .link a:hover {
+  text-decoration: underline !important;
+}
+
+.navbar {
+    background-color: #90604C;
+    color: #FFF6EC;
+    font-size: 25px;
+    padding-top: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 6vh;
+} 
+.navbar-brand {
+  font-family: 'Marck Script', cursive;
+  font-size: 10vw;
+  line-height: 90px;
+
+}
+a:link,
+a:hover,
+a:active,
+a:visited {
+  color: #fff6ec;
+  padding-right: 20px;
+}
+
+/*.my-navbar,
+.main-navbar{
+  max-height: 800px;
+} */
+
+
+
+/*
+--------------
+ .my-navbar {
+  backdrop-filter: blur(10px);
+}
+
+.my-navbar .link a:hover {
+  text-decoration: underline !important;
+}
+
+.NavigationClass{
+  justify-content: start;
+} */
+
+
+
--- a/laba4/src/components/navigation/Navigation.jsx
+++ b/laba4/src/components/navigation/Navigation.jsx
@ -0,0 +1,43 @@
+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' bg='dark' data-bs-theme='dark' className='my-navbar'>
+                    <Container fluid>
+                        <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                            Тяп-ляп
+                        </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/laba4/src/index.css
+++ b/laba4/src/index.css
@ -0,0 +1,287 @@
+body{
+  background: #FFF6EC;
+  height: 100%;
+}
+
+h2,h3,h4,p,img{background-color: #FFF6EC !important}
+
+ /* .container-fluid {
+  line-height: 70px;
+}
+.navbar {
+  background-color: #90604C;
+  color: #FFF6EC;
+  font-size: 25px;
+  padding-top: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
+  margin-bottom: 6vh;
+  max-height: 170px;
+}
+.navbar-brand {
+  font-family: 'Marck Script', cursive;
+  font-size: 10vw;
+
+} */
+
+a:link,
+a:hover,
+a:active,
+a:visited {
+  color: #fff6ec;
+  padding-right: 20px;
+} 
+
+h2 {
+  font-size: 7vw;
+  line-height: 1;
+  color: #3D160B !important;
+  font-weight: normal;
+}
+p {
+  margin-top: 5px;
+  font-size: 3vw;
+  line-height: 1;
+}
+.image2 {
+  flex: none;
+  border-radius: 40px;
+  margin: auto;
+  width: 30vw;
+}
+h1 {
+  text-align: center;
+  font-size: 4vw;
+  color: #3D160B !important;
+}
+h3 {
+  text-align: center;
+  color: #3D160B !important;
+}
+h4 {
+  font-size: 5vw;
+  text-align: center;
+  color: #3D160B !important;
+}
+p{
+  font-size: 2.4vw;
+  color: #3D160B !important;
+}
+
+/*=======*/
+
+.row{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.main_pannel{
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+}
+.table{
+  max-width: 100%;
+}
+
+.st2{
+  width: 50%;
+}
+.image1 {
+  flex: none;
+  border-radius: 40px;
+  margin: auto;
+  width: 32vw;
+  float: right;
+} 
+.image-text {
+  margin: 3vw;
+  font-size: 4vw;
+  background-image: url('/src/assets/ellipse.png');
+  position: relative;
+  border-radius: 80px;
+  width: 30vw;
+  height: 30vw!important;
+  background-size: 30vw;
+  height: 100vh; 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center; 
+}
+
+.btn,
+button[type="submit"],
+.btn-success{
+  background-color: #3D160B !important;
+  border: 3px solid #3D160B; 
+  width: 20vw;
+  margin-top: 45px;
+  margin-bottom: 20px;
+  border-radius: 25px;
+  font-size: 3vw;
+  margin-left: 2vw;
+  padding-right: 8px !important;
+}
+.column2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.admin{
+  font-size: 3vw; 
+  margin-left: 2vw;
+  padding-right: 8px !important;
+  margin-top: 40px; 
+  border-radius: 25px;
+  width: 20vw;
+  height: 10vw;
+}
+.adminAut{
+  font-size: 2vw; 
+  border-radius: 25px;
+  width: 10vw;
+}
+.AdminButton{
+  border-radius: 25px;
+  width: 20vw;
+  font-size: 1.5vw;
+  margin-left: 40vw;
+}
+.cakes{
+  display: flex;
+}
+ @media (max-width: 768px) {
+
+  .btn{ 
+    width: 70vw;
+    font-size: 4vw;
+  }
+  h1 {
+    font-size: 8vw;
+  }
+  h4 {
+    font-size: 8vw;
+
+  }
+  .image1,
+  .image2 {
+      width: 60vw;
+  }  
+  .image-text {
+    width: 50vw;
+    height: 50vw!important;
+    background-size: 50vw;
+    font-size: 7vw;
+  }  
+  .col-4{
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .columnP1{
+    width: 100%;
+    display: flex;
+    justify-content: center
+  }
+  .columnP2{
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .st2,
+  .column1 {
+    width: 80%;
+  }
+  h2{
+    font-size: 8vw;
+    text-align: center;
+  }
+  p{
+    font-size: 5vw;
+    text-align: center;
+  }
+  button[type="submit"] {
+    font-size: 4vw;
+    width: 30vw;
+    height: 20vw;
+  }
+  .admin{
+    font-size: 4vw;
+    width: 30vw;
+    height: 20vw;
+    align-items: center;
+    padding-top: 3vw;
+    margin-top: 23px;
+  } 
+  .adminAut{
+    font-size: 6vw;
+    width: 25vw;
+  }
+  .AdminButton{
+    width: 30vw;
+    font-size: 3vw;
+    margin-left: 10vw;
+  }
+} 
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+
+input[type="text"],
+input[type="phone"],
+input[type="password"],
+textarea {
+  border-radius: 25px;
+  padding: 10px;
+  border: 1px solid #f4ecd9;
+  width: 100%;
+  margin: 0 auto;
+}
+@media (min-width: 768px) {
+  input[type="text"],
+  input[type="phone"],
+  input[type="password"],
+  textarea {
+    width: 50%; 
+    margin: 0 auto; 
+  }
+}
+
+.form-text {
+  margin-top: 30px;
+  text-align: center;
+}
+
+form {
+  margin-top: 40px;
+  text-align: center;
+}
+
+form div {
+  margin-bottom: 75px;
+}
+
+
+table, th, td {
+  font-size: 3vw;
+  width: auto;
+  padding: 20px;
+  margin-top: 30px;
+  margin: auto;
+  border: 3px solid;
+  text-align: center;
+}
+
+.formAdd{
+  width: 80vw;
+margin-left: 10vw;
+}
+
+
--- a/laba4/src/main.jsx
+++ b/laba4/src/main.jsx
@ -0,0 +1,79 @@
+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 Page5 from './pages/Page5.jsx';
+import Page6 from './pages/Page6.jsx';
+import Page7 from './pages/Page7.jsx';
+import Page8 from './pages/Page8.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: '/page5',
+    element: <Page5 />,
+    title: 'Прайс на декор',
+  },
+  {
+    path: '/page6',
+    element: <Page6 />,
+    title: 'Готовые варианты',
+  },
+  {
+    path: '/page7',
+    element: <Page7 />,
+    title: 'Редактирование товаров',
+  },
+  {
+    path: '/page8',
+    element: <Page8 />,
+    title: 'Вход админа',
+  },
+  {
+    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/laba4/src/pages/ErrorPage.jsx
+++ b/laba4/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/laba4/src/pages/Page1.jsx
+++ b/laba4/src/pages/Page1.jsx
@ -0,0 +1,23 @@
+import cake from '../assets/cake.png';
+
+const Page1 = () => {
+    return (
+      <div className="h-100 d-flex flex-column">
+        <main className="container main_pannel">
+          <div className="container table">
+            <div className="row">
+              <div className="col-8 column1">
+                <h2>
+                  У нас самые вкусные торты <br />(в узких кругах)
+                </h2>
+              </div>
+              <div className="col-4 column2">
+                <img className="image1" src={cake} alt="cake" />
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  };
+export default Page1;
--- a/laba4/src/pages/Page2.jsx
+++ b/laba4/src/pages/Page2.jsx
@ -0,0 +1,27 @@
+import { Link } from 'react-router-dom';
+
+const Page2 = () => {
+  return (
+    <main className="container main_pannel">
+      <div className="container table">
+        <div className="row">
+          <div className="col-6 columnP1">
+            <h3 className="image-text">
+              Торт <br />800 руб/кг
+            </h3>
+          </div>
+          <div className="col-6 columnP2">
+            <h4>Декор оплачивается отдельно!</h4>
+            <Link to="/page5" className="btn">
+              Посмотреть прайс на декор
+            </Link>
+            <Link to="/page6" className="btn">
+              Готовые варианты тортов
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+export default Page2;
--- a/laba4/src/pages/Page3.jsx
+++ b/laba4/src/pages/Page3.jsx
@ -0,0 +1,28 @@
+import aboutUs from '../assets/about_us.png';
+
+const Page3 = () => {
+  return (
+    <main className="container main_pannel">
+      <div className="container table">
+        <h1>О нас</h1>
+        <div className="row">
+          <div className="col-4 st1">
+            <img className="image2" src={aboutUs} alt="about_us" />
+          </div>
+          <div className="col-8 st2">
+            <p>
+              Добро пожаловать в кондитерскую &quot;Тяп-ляп&quot; -
+               место, где пекутся торты с любовью, юмором и другими начинками! <br />
+              <br />
+              У нас Вы можете заказать торты на любой случай или просто,
+              чтобы порадовать себя.
+              Каждый торт из кондитерской “Тяп-ляп” идеально подходит
+              для воскресных завтраков, понедельников без коллег и сред уныния!
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+export default Page3;
--- a/laba4/src/pages/Page4.jsx
+++ b/laba4/src/pages/Page4.jsx
@ -0,0 +1,32 @@
+import { Button } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const Page4 = () => {
+  return (
+    <main>
+      <div className="form-text">
+        <p>Заполните форму, чтобы оставить заявку. <br /> Мы Вам перезвоним!</p>
+      </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="phone">Номер телефона</label>
+          <input type="phone" name="phone" id="phone" required />
+        </div>
+        <div className="form-group">
+          <label htmlFor="message">Оставьте комментарий</label>
+          <textarea name="message" id="message"></textarea>
+        </div>
+        <Button type="submit">Отправить данные</Button>
+        <Link to="/page8" className="btn">
+          Вход для админа
+        </Link>
+      </form>
+    </main>
+  );
+};
+
+export default Page4;
--- a/laba4/src/pages/Page5.jsx
+++ b/laba4/src/pages/Page5.jsx
@ -0,0 +1,41 @@
+const Page5 = () => {
+  return (
+    <main>
+      <div className="price">
+        <table>
+          <thead>
+            <tr>
+              <th scope="col" style={{ height: '100px' }}>Декор</th>
+              <th scope="col">Количество</th>
+              <th scope="col">Цена/руб</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row" style={{ height: '70px' }}>Ягоды</th>
+              <td>100г</td>
+              <td>150</td>
+            </tr>
+            <tr>
+              <th scope="row" style={{ height: '70px' }}>Леденцы</th>
+              <td>1шт</td>
+              <td>40</td>
+            </tr>
+            <tr>
+              <th scope="row" style={{ height: '70px' }}>Шоколад</th>
+              <td>100г</td>
+              <td>90</td>
+            </tr>
+            <tr>
+              <th scope="row" style={{ height: '70px' }}>Зефир</th>
+              <td>100г</td>
+              <td>50</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+  );
+};
+
+export default Page5;
--- a/laba4/src/pages/Page6.jsx
+++ b/laba4/src/pages/Page6.jsx
@ -0,0 +1,29 @@
+import mam from '../assets/mam.png';
+import dad from '../assets/dad.png';
+import podruge from '../assets/podruge.png';
+
+const Page6 = () => {
+  return (
+    <main>
+      <h1>Варианты готовых тортов:</h1>
+      <div className="container text-center">
+        <div className="row cakes">
+          <div className="col">
+            <img src={mam} className="img_options" alt="mam" width="400" />
+            <p>Маме<br />Цена: 1500 руб.</p>
+          </div>
+          <div className="col">
+            <img src={dad} className="img_options" alt="dad" width="400" />
+            <p>Папе<br />Цена: 1600 руб.</p>
+          </div>
+          <div className="col">
+            <img src={podruge} className="img_options" alt="podruge" width="400" />
+            <p>Подружке<br />Цена: 1200 руб.</p>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Page6;
--- a/laba4/src/pages/Page7.jsx
+++ b/laba4/src/pages/Page7.jsx
@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+
+const Page7 = () => {
+    return (
+        <div className="container-fluid p-2">
+          <div className="btn-group" role="group">
+            <Link to="/page-edit" className="btn btn-success">
+                Добавить новый товар
+            </Link>
+          </div>
+          <div>
+            <table className="table table-striped">
+              <thead>
+                <tr>
+                  <th scope="col">#</th>
+                  <th scope="col">Товар</th>
+                  <th scope="col">Цена</th>
+                  <th scope="col">Количество</th>
+                  <th scope="col">Сумма</th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                </tr>
+                <tr>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                  <th scope="col"></th>
+                </tr>
+              </thead>
+              {/* <tbody>
+                {items.map(item => (
+                  <tr key={item.id}>
+                    <td>{item.id}</td>
+                    <td>{item.name}</td>
+                    <td>{item.price}</td>
+                    <td>{item.count}</td>
+                    <td>{item.sum}</td>
+                    <td><button className="btn btn-primary"/
+                     onClick={() => handleEditItem(item.id)}>Редактировать</button></td>
+                    <td><button className="btn btn-danger" /
+                    onClick={() => handleDeleteItem(item.id)}>Удалить</button></td>
+                  </tr>
+                ))}
+              </tbody> */}
+            </table>
+          </div>
+        </div>
+      );
+    };
+
+export default Page7;
--- a/laba4/src/pages/Page8.jsx
+++ b/laba4/src/pages/Page8.jsx
@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+
+const Page8 = () => {
+  return (
+    <main>
+      <div className="form-text">
+        <p>Вход для администратора</p>
+      </div>
+      <form>
+        <div className="form-group">
+          <label htmlFor="login">Введите логин</label>
+          <input type="text" name="login" id="login" required autoComplete="username" />
+        </div>
+        <div className="form-group">
+          <label htmlFor="passwordAdmin">Введите пароль</label>
+          <input type="password" name="passwordAdmin" id="passwordAdmin" required autoComplete="current-password" />
+        </div>
+        <Link to="/page7" className="btn adminAut">
+            Вход
+        </Link>
+      </form>
+    </main>
+  );
+};
+
+export default Page8;
--- a/laba4/src/pages/PageEdit.jsx
+++ b/laba4/src/pages/PageEdit.jsx
@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const PageEdit = () => {
+    const [selected, setSelected] = useState('');
+  const [price, setPrice] = useState(0.00);
+  const [count, setCount] = useState(0);
+  const [setImage] = useState(null);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Обработка данных формы
+  };
+
+  return (
+    <main className="container-fluid p-2">
+      <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" className="needs-validation" noValidate onSubmit={handleSubmit}>
+        <div className="mb-2">
+          <label htmlFor="item" className="form-label">Товары</label>
+          <select id="item" className="form-select" name="selected" required value={selected} onChange={(event) => setSelected(event.target.value)}>
+          </select>
+        </div>
+        <div className="mb-2">
+          <label className="form-label" htmlFor="price">Цена</label>
+          <input id="price" name="price" className="form-control" type="number" value={price} min="1000.00" step="0.50" required onChange={(event) => setPrice(event.target.value)} />
+        </div>
+        <div className="mb-2">
+          <label className="form-label" htmlFor="count">Количество</label>
+          <input id="count" name="count" className="form-control" type="number" value={count} min="1" step="1" required onChange={(event) => setCount(event.target.value)} />
+        </div>
+        <div className="mb-2">
+          <label className="form-label" htmlFor="image">Изображение</label>
+          <input id="image" type="file" name="image" className="form-control" accept="image/*" onChange={(event) => setImage(event.target.files[0])} />
+        </div>
+        <Link to="/page7" className="btn">
+                Назад
+        </Link>
+        <button type="submit" className="btn btn-primary">Сохранить</button>
+      </form>
+    </main>
+  );
+};
+
+export default PageEdit;
--- a/laba4/vite.config.js
+++ b/laba4/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,
+  },
+});