Egor_Petrushin/Web-programming_Petrushin_E.A._PIbd-22
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Egor_Petrushin:c812c37f25881a081db5fd4601f110acd1b7ac71
Branches Tags
Egor_Petrushin:main
...
compare: Egor_Petrushin:03bda473ceb3fa914cda6345c9771d3529a340c2
Branches Tags
Egor_Petrushin:main

2 Commits
c812c37f25 ... 03bda473ce

Author SHA1 Message Date
GokaPek
03bda473ce 4_1 2023-12-07 13:04:19 +04:00
GokaPek
4bfeea2d10 4 2023-11-29 16:39:51 +04:00
43 changed files with 201071 additions and 5 deletions
Show Stats Expand all files Collapse all files

8
Lab3/PrBookfill/css/style.css
View File

@ -12,6 +12,9 @@ header{
background: #c03000; background: #c03000;
height: 70px; height: 70px;
border-radius: 4% / 60%; border-radius: 4% / 60%;
font-family: "ITCErasStd-Bold";
font-size: 25px;
align-items: center;
} }
.logo { .logo {
height: 45px; height: 45px;
@ -120,8 +123,3 @@ header{
background-color: white; background-color: white;
overflow-y: scroll; overflow-y: scroll;
} }
@media(max-width: 400px){
.logo{
height: 30px;
}
}

195990
Lab4/PIbd-22_Petrushin_E.A._Web_4.rtf Normal file
View File

File diff suppressed because it is too large Load Diff

24
Lab4/PrBookfill/.eslintrc.cjs Normal file
View File

@ -0,0 +1,24 @@
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',
},
}

24
Lab4/PrBookfill/.gitignore vendored Normal file
View File

@ -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?

22
Lab4/PrBookfill/.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,22 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Edge",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}"
}
]
}

29
Lab4/PrBookfill/README.md Normal file
View File

@ -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
```

15
Lab4/PrBookfill/index.html Normal file
View File

@ -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>My 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>

14
Lab4/PrBookfill/jsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES2020",
"jsx": "react",
"strictNullChecks": true,
"strictFunctionTypes": true
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}

4353
Lab4/PrBookfill/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

33
Lab4/PrBookfill/package.json Normal file
View File

@ -0,0 +1,33 @@
{
"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": {
"bootstrap": "^5.3.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-bootstrap": "^2.9.1",
"react-bootstrap-icons": "^1.10.3",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0",
"react-router-dom": "^6.18.0"
},
"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"
}
}

3
Lab4/PrBookfill/public/favicon.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

0
Lab4/PrBookfill/src/App.css Normal file
View File

24
Lab4/PrBookfill/src/App.jsx Normal file
View File

@ -0,0 +1,24 @@
import PropTypes from 'prop-types';
import { Container } from 'react-bootstrap';
import { Outlet } from 'react-router-dom';
import './App.css';
import Footer from './components/footer/Footer.jsx';
import Navigation from './components/navigation/Navigation.jsx';
const App = ({ routes }) => {
return (
<>
<Navigation routes={routes}></Navigation>
<Container className='p-2' as="main" fluid>
<Outlet />
</Container>
<Footer />
</>
);
};
App.propTypes = {
routes: PropTypes.array,
};
export default App;

BIN
Lab4/PrBookfill/src/assets/banner1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 640 KiB

BIN
Lab4/PrBookfill/src/assets/banner2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 812 KiB

BIN
Lab4/PrBookfill/src/assets/banner3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 767 KiB

BIN
Lab4/PrBookfill/src/assets/big-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
Lab4/PrBookfill/src/assets/books/blev.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 545 KiB

BIN
Lab4/PrBookfill/src/assets/books/capital.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
Lab4/PrBookfill/src/assets/books/filosofy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
Lab4/PrBookfill/src/assets/books/hideger.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

BIN
Lab4/PrBookfill/src/assets/books/metro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
Lab4/PrBookfill/src/assets/books/platon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
Lab4/PrBookfill/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

25
Lab4/PrBookfill/src/components/banner/Banner.css Normal file
View File

@ -0,0 +1,25 @@
#banner {
margin: 2px;
display: flex;
align-items: center;
flex-direction: column;
}
#banner img {
border: 1px solid #3c3c3f;
border-radius: 5px;
}
#banner img.banner-show {
width: 100%;
opacity: 1;
transition: opacity 1s, visibility 0s;
}
#banner img.banner-hide {
height: 0;
width: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 0s 1s;
}

40
Lab4/PrBookfill/src/components/banner/Banner.jsx Normal file
View File

@ -0,0 +1,40 @@
import { useEffect, useState } from 'react';
import banner1 from '../../assets/banner1.png';
import banner2 from '../../assets/banner2.png';
import banner3 from '../../assets/banner3.png';
import './Banner.css';
const Banner = () => {
const [currentBanner, setCurrentBanner] = useState(0);
const banners = [banner1, banner2, banner3];
const getBannerClass = (index) => {
return currentBanner === index ? 'banner-show' : 'banner-hide';
};
useEffect(() => {
const bannerInterval = setInterval(
() => {
console.info('Banner changed');
let current = currentBanner + 1;
if (current === banners.length) {
current = 0;
}
setCurrentBanner(current);
},
5000,
);
return () => clearInterval(bannerInterval);
});
return (
<div id="banner" >
{
banners.map((banner, index) =>
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
}
</div >
);
};
export default Banner;

5
Lab4/PrBookfill/src/components/footer/Footer.css Normal file
View File

@ -0,0 +1,5 @@
.my-footer {
background-color: #9c9c9c;
height: 32px;
color: #fff;
}

13
Lab4/PrBookfill/src/components/footer/Footer.jsx Normal file
View File

@ -0,0 +1,13 @@
import './Footer.css';
const Footer = () => {
const year = new Date().getFullYear();
return (
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Автор, {year}
</footer>
);
};
export default Footer;

41
Lab4/PrBookfill/src/components/navigation/Navigation.css Normal file
View File

@ -0,0 +1,41 @@
.my-navbar {
width: 100%;
background-color: #c03000 !important;
height: 70px;
border-radius: 4% / 60%;
}
.my-navbar .link a:hover {
text-decoration: underline !important;
text-decoration: none;
color: white;
}
.my-navbar .logo {
width: auto;
}
.navbar-collapse.show{
background-color: #c03000;
}
.user-photo {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
}
.logo {
height: 45px;
width: auto;
}
.navbar-nav {
font-family: "ITCErasStd-Bold";
font-size: 25px;
align-items: center;
}
.nav-link {
text-decoration: none;
color: white;
}

43
Lab4/PrBookfill/src/components/navigation/Navigation.jsx Normal file
View File

@ -0,0 +1,43 @@
import {
Navbar, Container, Nav, Form, FormControl, Button,
} from 'react-bootstrap';
import './Navigation.css';
import { Link } from 'react-router-dom';
// eslint-disable-next-line import/no-extraneous-dependencies
import { FaSearch } from 'react-icons/fa';
const Header = () => {
return (
<Navbar expand='lg' bg='dark' variant='dark' className='my-navbar'>
<Container fluid>
<Navbar.Brand as={Link} to='/'>
<img className='logo pb-2' src='src/assets/big-logo.png' alt='Логотип' />
</Navbar.Brand>
<Navbar.Toggle aria-controls='navbarSupportedContent' />
<Navbar.Collapse id='navbarSupportedContent'>
<Nav className='me-auto'>
<Form className='d-flex mr-4 mt-4'>
<FormControl
type='search'
placeholder='Search'
className='m-1'
aria-label='Search'
/>
<Button variant='outline-success' type='submit'>
<FaSearch />
</Button>
</Form>
<Nav.Link as={Link} to='/favour.html'>Favourite</Nav.Link>
<Nav.Link as={Link} to='/audio.html'>Audio</Nav.Link>
<Nav.Link as={Link} to='/comics.html'>Comics</Nav.Link>
<Nav.Link as={Link} to='/login.html'>
<img id='profile' className='user-photo mt-1 ml-4 mr-3' />
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
export default Header;

BIN
Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.ttf Normal file
View File

Binary file not shown.

BIN
Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.woff Normal file
View File

Binary file not shown.

BIN
Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.woff2 Normal file
View File

Binary file not shown.

9
Lab4/PrBookfill/src/fonts/style.css Normal file
View File

@ -0,0 +1,9 @@
@font-face {
font-family: 'ITC Eras';
src: local('ITC Eras Bold'), local('ITC-Eras-Bold'),
url('ITCErasStd-Bold.woff2') format('woff2'),
url('ITCErasStd-Bold.woff') format('woff'),
url('ITCErasStd-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

36
Lab4/PrBookfill/src/index.css Normal file
View File

@ -0,0 +1,36 @@
@import url("/src/fonts/style.css");
@font-face {
font-family: "ITCErasStd-Bold";
src: url('/src/fonts/ITCErasStd-Bold.woff2') format('woff2'),
url('/src/fonts/ITCErasStd-Bold.woff') format('woff');
font-style: normal;
font-weight: 400;
}
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%;
}
}

55
Lab4/PrBookfill/src/main.jsx Normal file
View File

@ -0,0 +1,55 @@
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 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: '/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>,
);

19
Lab4/PrBookfill/src/pages/ErrorPage.jsx Normal file
View File

@ -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;

36
Lab4/PrBookfill/src/pages/Page1.jsx Normal file
View File

@ -0,0 +1,36 @@
import { Link } from 'react-router-dom';
import Banner from '../components/banner/Banner.jsx';
const Page1 = () => {
return (
<>
<Banner />
<>
<h1>Пример web-страницы.</h1>
<h2>1. Структурные элементы</h2>
<p><b>Полужирное начертание <i>курсив</i></b></p>
<p>Абзац 2 <Link to="/page2">Ссылка</Link></p>
<h3>1.1. Списки</h3>
<p>
Список маркированный:
</p>
<ul>
<li><a href="/page2" target="_blank">
Элемент списка 1</a></li>
<li>Элемент списка 2</li>
<li>...</li>
</ul>
<p>
Список нумерованный:
</p>
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>...</li>
</ol>
</>
</>
);
};
export default Page1;

43
Lab4/PrBookfill/src/pages/Page2.jsx Normal file
View File

@ -0,0 +1,43 @@
import { Table } from 'react-bootstrap';
import ulstuLogo from '../assets/logo.png';
const Page2 = () => {
return (
<>
<p className="text-center">
Вторая страница содержит пример рисунка (рис. 1) и таблицы (таб. 1).
</p>
<div className="text-center">
<img src={ulstuLogo} alt="logo" width="128" />
<br />
Рис. 1. Пример рисунка.
</div>
<div className="mt-3 row justify-content-center">
<Table className="w-50" bordered>
<caption>Таблица 1. Пример таблицы.</caption>
<thead>
<tr>
<th className="w-25">Номер</th>
<th>ФИО</th>
<th className="w-25">Телефон</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Иванов</td>
<td>89999999999</td>
</tr>
<tr>
<td>2</td>
<td>Петров</td>
<td>89999999991</td>
</tr>
</tbody>
</Table>
</div>
</>
);
};
export default Page2;

78
Lab4/PrBookfill/src/pages/Page3.jsx Normal file
View File

@ -0,0 +1,78 @@
import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
const Page3 = () => {
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="row justify-content-center">
<Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group className="mb-2" controlId="lastname">
<Form.Label>Фамилия</Form.Label>
<Form.Control type="text" name="lastname" required />
<Form.Control.Feedback>Фамилия заполнена</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Фамилия не заполнена</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-2" controlId="firstname">
<Form.Label>Имя</Form.Label>
<Form.Control type="text" name="firstname" required />
</Form.Group>
<Form.Group className="mb-2" controlId="email">
<Form.Label>E-mail</Form.Label>
<Form.Control type="email" name="email" placeholder="name@example.ru" required />
</Form.Group>
<Form.Group className="mb-2" controlId="password">
<Form.Label>Пароль</Form.Label>
<Form.Control type="password" name="password" required />
</Form.Group>
<Form.Group className="mb-2" controlId="date">
<Form.Label>Дата</Form.Label>
<Form.Control type="date" name="date" required />
</Form.Group>
<Form.Group className="mb-2" controlId="disabled">
<Form.Label>Выключенный компонент</Form.Label>
<Form.Control type="text" name="disabled" value="Некоторое значение" disabled />
</Form.Group>
<Form.Group className="mb-2" controlId="readonly">
<Form.Label>Компонент только для чтения</Form.Label>
<Form.Control type="text" name="readonly" value="Некоторое значение" readOnly />
</Form.Group>
<Form.Group className="mb-2" controlId="color">
<Form.Label>Выбор цвета</Form.Label>
<Form.Control type="color" name="color" defaultValue='#ff0055' />
</Form.Group>
<Form.Group className="mb-2 d-md-flex flex-md-row">
<Form.Check className="me-md-3" type='checkbox' name='checkbox1' label='Флажок 1' />
<Form.Check className="me-md-3" type='checkbox' name='checkbox2' label='Флажок 2' />
</Form.Group>
<Form.Group className="mb-2 d-md-flex flex-md-row">
<Form.Check className="me-md-3" type='radio' name='radio1' label='Переключатель 1' />
<Form.Check className="me-md-3" type='switch' name='radio2' label='Переключатель 2' />
</Form.Group>
<Form.Group className="mb-2">
<Form.Select name='selected' required>
<option value="" selected>Выберите значение</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</Form.Select>
</Form.Group>
<div className="text-center">
<Button className="w-50" variant="primary" type="submit">Отправить</Button>
</div>
</Form>
</div>
);
};
export default Page3;

28
Lab4/PrBookfill/src/pages/Page4.jsx Normal file
View File

@ -0,0 +1,28 @@
import { Button, ButtonGroup, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Page4 = () => {
return (
<>
<ButtonGroup>
<Button id="items-add" variant="info">Добавить товар (диалог)</Button>
<Button as={Link} to="/page-edit" variant="success">Добавить товар (страница)</Button>
</ButtonGroup>
<Table className="mt-2" 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>
<th scope="col"></th>
</thead>
<tbody></tbody>
</Table>
</>
);
};
export default Page4;

53
Lab4/PrBookfill/src/pages/PageEdit.jsx Normal file
View File

@ -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" controlId="item">
<Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
<Form.Select name='selected' required>
</Form.Select>
</Form.Group>
<Form.Group className="mb-2" controlId="price">
<Form.Label>Цена</Form.Label>
<Form.Control type="number" name="price"
value="0.00" min="1000.00" step="0.50" required />
</Form.Group>
<Form.Group className="mb-2" controlId="count">
<Form.Label>Количество</Form.Label>
<Form.Control type="number" name="count"
value="0" min="1" step="1" required />
</Form.Group>
<Form.Group className="mb-2" controlId="file">
<Form.Label>Изображение</Form.Label>
<Form.Control type="file" name="image" accept="image/*" />
</Form.Group>
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
<Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/page4" variant="secondary">Назад</Button>
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
</Form.Group>
</Form>
</>
);
};
export default PageEdit;

13
Lab4/PrBookfill/vite.config.js Normal file
View File

@ -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,
},
});