start working on lab 4
This commit is contained in:
parent
2c994a6622
commit
39c40a8add
BIN
Library/js.zip
BIN
Library/js.zip
Binary file not shown.
24
ReactLibrary/.eslintrc.cjs
Normal file
24
ReactLibrary/.eslintrc.cjs
Normal 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
ReactLibrary/.gitignore
vendored
Normal file
24
ReactLibrary/.gitignore
vendored
Normal 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?
|
68
ReactLibrary/data.json
Normal file
68
ReactLibrary/data.json
Normal file
@ -0,0 +1,68 @@
|
||||
{
|
||||
"categories": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Ода"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Послание"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Лирическое стихотворение"
|
||||
}
|
||||
],
|
||||
"books": [
|
||||
{
|
||||
"categoriesId": "3",
|
||||
"authorsId": "1",
|
||||
"name": "Зимний вечер",
|
||||
"year": "1830",
|
||||
"image": "",
|
||||
"id": 1
|
||||
},
|
||||
{
|
||||
"categoriesId": "1",
|
||||
"authorsId": "2",
|
||||
"name": "Властителям и судиям",
|
||||
"year": "1780",
|
||||
"image": "",
|
||||
"id": 2
|
||||
},
|
||||
{
|
||||
"categoriesId": "1",
|
||||
"authorsId": "3",
|
||||
"name": "Exegi monumentum",
|
||||
"year": "23 до н. э.",
|
||||
"image": "",
|
||||
"id": 3
|
||||
},
|
||||
{
|
||||
"categoriesId": "2",
|
||||
"authorsId": "4",
|
||||
"name": "К бедному поэту",
|
||||
"year": "1796",
|
||||
"image": "",
|
||||
"id": 4
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Пушкин А. С."
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Державин Г. Р."
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Квинт Гораций Флакк"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Карамзин Н. М."
|
||||
}
|
||||
]
|
||||
}
|
15
ReactLibrary/index.html
Normal file
15
ReactLibrary/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="./logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Моя библиотека</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
ReactLibrary/jsconfig.json
Normal file
14
ReactLibrary/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
4344
ReactLibrary/package-lock.json
generated
Normal file
4344
ReactLibrary/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
ReactLibrary/package.json
Normal file
32
ReactLibrary/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
1
ReactLibrary/public/logo.svg
Normal file
1
ReactLibrary/public/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 43 43 0 96 0h96V190.7c0 13.4 15.5 20.9 26 12.5L272 160l54 43.2c10.5 8.4 26 .9 26-12.5V0h32 32c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32v64c17.7 0 32 14.3 32 32s-14.3 32-32 32H384 96c-53 0-96-43-96-96V96zM64 416c0 17.7 14.3 32 32 32H352V384H96c-17.7 0-32 14.3-32 32z"/></svg>
|
After Width: | Height: | Size: 525 B |
0
ReactLibrary/src/App.css
Normal file
0
ReactLibrary/src/App.css
Normal file
24
ReactLibrary/src/App.jsx
Normal file
24
ReactLibrary/src/App.jsx
Normal 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;
|
25
ReactLibrary/src/components/banner/Banner.css
Normal file
25
ReactLibrary/src/components/banner/Banner.css
Normal 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
ReactLibrary/src/components/banner/Banner.jsx
Normal file
40
ReactLibrary/src/components/banner/Banner.jsx
Normal 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
ReactLibrary/src/components/footer/Footer.css
Normal file
5
ReactLibrary/src/components/footer/Footer.css
Normal file
@ -0,0 +1,5 @@
|
||||
.my-footer {
|
||||
background-color: #9c9c9c;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
}
|
13
ReactLibrary/src/components/footer/Footer.jsx
Normal file
13
ReactLibrary/src/components/footer/Footer.jsx
Normal 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;
|
12
ReactLibrary/src/components/navigation/Navigation.css
Normal file
12
ReactLibrary/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,12 @@
|
||||
.my-navbar {
|
||||
background-color: #3c3c3c !important;
|
||||
}
|
||||
|
||||
.my-navbar .link a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.my-navbar .logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
41
ReactLibrary/src/components/navigation/Navigation.jsx
Normal file
41
ReactLibrary/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||
import { Cart2 } from 'react-bootstrap-icons';
|
||||
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();
|
||||
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||
|
||||
return (
|
||||
<header>
|
||||
<Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
|
||||
<Container fluid>
|
||||
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||
<Cart2 className='d-inline-block align-top me-1 logo' />
|
||||
My shop
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||
{
|
||||
pages.map((page) =>
|
||||
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||
{page.title}
|
||||
</Nav.Link>)
|
||||
}
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
53
ReactLibrary/src/index.css
Normal file
53
ReactLibrary/src/index.css
Normal file
@ -0,0 +1,53 @@
|
||||
body{
|
||||
font-family: "Verdana", sans-serif;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
header nav{
|
||||
background-color: #ff6600;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
header nav{
|
||||
height: 84px;
|
||||
}
|
||||
}
|
||||
footer{
|
||||
background-color: #000000;
|
||||
}
|
||||
.nav-link:hover{
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.library-reference{
|
||||
background-color: #e0adff;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.library-reference:hover{
|
||||
background-color: #e0adff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.library-button{
|
||||
background-color: #e8b8e8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.library-button:hover{
|
||||
background-color: #bf80e6;
|
||||
font-weight: bold;
|
||||
}
|
||||
.height-min{
|
||||
height: min-content
|
||||
}
|
||||
h1{
|
||||
color: #ff6600;
|
||||
}
|
||||
.black-text{
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.orange-text{
|
||||
color: #ff6600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.white-text{
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
55
ReactLibrary/src/main.jsx
Normal file
55
ReactLibrary/src/main.jsx
Normal 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
ReactLibrary/src/pages/ErrorPage.jsx
Normal file
19
ReactLibrary/src/pages/ErrorPage.jsx
Normal 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;
|
13
ReactLibrary/vite.config.js
Normal file
13
ReactLibrary/vite.config.js
Normal 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,
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue
Block a user