Skip to content

Commit d21733a

Browse files
KairanIKairanI
committedFeb 1, 2025
code review BookCard
1 parent d37e898 commit d21733a

29 files changed

+393
-397
lines changed
 

‎README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ export default tseslint.config({
1818
languageOptions: {
1919
// other options...
2020
parserOptions: {
21-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
21+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
2222
tsconfigRootDir: import.meta.dirname,
2323
},
2424
},
25-
})
25+
});
2626
```
2727

2828
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,11 +31,11 @@ export default tseslint.config({
3131

3232
```js
3333
// eslint.config.js
34-
import react from 'eslint-plugin-react'
34+
import react from "eslint-plugin-react";
3535

3636
export default tseslint.config({
3737
// Set the react version
38-
settings: { react: { version: '18.3' } },
38+
settings: { react: { version: "18.3" } },
3939
plugins: {
4040
// Add the react plugin
4141
react,
@@ -44,7 +44,7 @@ export default tseslint.config({
4444
// other rules...
4545
// Enable its recommended rules
4646
...react.configs.recommended.rules,
47-
...react.configs['jsx-runtime'].rules,
47+
...react.configs["jsx-runtime"].rules,
4848
},
49-
})
49+
});
5050
```

‎eslint.config.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import js from '@eslint/js'
2-
import globals from 'globals'
3-
import reactHooks from 'eslint-plugin-react-hooks'
4-
import reactRefresh from 'eslint-plugin-react-refresh'
5-
import tseslint from 'typescript-eslint'
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import reactHooks from "eslint-plugin-react-hooks";
4+
import reactRefresh from "eslint-plugin-react-refresh";
5+
import tseslint from "typescript-eslint";
66

77
export default tseslint.config(
8-
{ ignores: ['dist'] },
8+
{ ignores: ["dist"] },
99
{
1010
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11-
files: ['**/*.{ts,tsx}'],
11+
files: ["**/*.{ts,tsx}"],
1212
languageOptions: {
1313
ecmaVersion: 2020,
1414
globals: globals.browser,
1515
},
1616
plugins: {
17-
'react-hooks': reactHooks,
18-
'react-refresh': reactRefresh,
17+
"react-hooks": reactHooks,
18+
"react-refresh": reactRefresh,
1919
},
2020
rules: {
2121
...reactHooks.configs.recommended.rules,
22-
'react-refresh/only-export-components': [
23-
'warn',
22+
"react-refresh/only-export-components": [
23+
"warn",
2424
{ allowConstantExport: true },
2525
],
2626
},
2727
},
28-
)
28+
);

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<!--home-head-->
99
</head>
1010
<body>
11-
<div id="sharebook"><!--home-body--></div>
12-
<script src="./src/entry-client.tsx" type="module"></script>
11+
<div id="sharebook"><!--home-body--></div>
12+
<script src="./src/entry-client.tsx" type="module"></script>
1313
</body>
1414
</html>

‎src/antdConfig.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type {ThemeConfig} from "antd";
1+
import type { ThemeConfig } from "antd";
22

33
export const antdThemeConfig: ThemeConfig = {
44
cssVar: true,
@@ -18,7 +18,7 @@ export const antdThemeConfig: ThemeConfig = {
1818
},
1919
Input: {
2020
colorText: "#000000",
21-
activeBorderColor: "rgb(42, 127, 255, 80)",
21+
activeBorderColor: "rgba(42, 127, 255, 80)",
2222
fontFamily: "Onest-Regular",
2323
hoverBorderColor: "transparent",
2424
colorBorder: "transparent",
@@ -30,15 +30,15 @@ export const antdThemeConfig: ThemeConfig = {
3030
Dropdown: {
3131
paddingBlock: 6,
3232
controlPaddingHorizontal: 10,
33-
boxShadowSecondary: "0px 2px 7px rgb(0, 0, 0, 0.15)",
33+
boxShadowSecondary: "0px 2px 7px rgba(0, 0, 0, 0.15)",
3434
fontFamily: "Onest-Regular",
3535
colorBgElevated: "#FFFFFF",
3636
},
3737
Card: {
3838
paddingLG: 0,
3939
borderRadiusLG: 10,
40-
boxShadow: "0px 20px 7px rgb(42, 127, 255, 80)",
41-
boxShadowTertiary: "0px 2px 7px rgb(42, 127, 255, 80)",
40+
boxShadow: "0px 20px 7px rgba(42, 127, 255, 80)",
41+
boxShadowTertiary: "0px 2px 7px rgba(42, 127, 255, 80)",
4242
colorBgContainer: "#FFFFFF",
4343
},
4444
},

‎src/components/Header/components/Avatar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styles from "../header.module.scss";
2-
import {Button} from "antd";
3-
import {SvgAvatar} from "../svg/SvgAvatar.tsx";
2+
import { Button } from "antd";
3+
import { SvgAvatar } from "../svg/SvgAvatar.tsx";
44

55
export function Avatar() {
66
return (

‎src/components/Header/components/Logo.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Link} from "react-router";
2-
import {SvgLogo} from "../svg/SvgLogo.tsx";
1+
import { Link } from "react-router";
2+
import { SvgLogo } from "../svg/SvgLogo.tsx";
33
import styles from "../header.module.scss";
44

55
export function Logo() {

‎src/components/Header/components/Nav.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styles from "../header.module.scss";
2-
import {NavLink} from "react-router";
2+
import { NavLink } from "react-router";
33

44
interface MainMenuItem {
55
title: string;

‎src/components/Header/components/Search.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styles from "../header.module.scss";
2-
import {Input} from "antd";
3-
import {SvgSearch} from "../svg/SvgSearch.tsx";
2+
import { Input } from "antd";
3+
import { SvgSearch } from "../svg/SvgSearch.tsx";
44

55
export function Search() {
66
return (

‎src/components/Header/header.module.scss

+62-64
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,88 @@
11
.header {
2-
background: rgb(250, 250, 250, 80%);
3-
border-bottom: 1px solid var(--ant-color-bg-container);
4-
display: flex;
5-
justify-content: center;
6-
height: 66px;
2+
background: rgba(250, 250, 250, 80%);
3+
border-bottom: 1px solid var(--ant-color-bg-container);
4+
display: flex;
5+
justify-content: center;
6+
height: 66px;
77
}
88

99
.container {
10-
max-width: 1400px;
11-
display: flex;
12-
align-items: center;
13-
flex: 1;
14-
padding: 0 35px 0 35px;
15-
16-
font-family: 'Onest-Regular', sans-serif;
17-
font-size: 15px;
10+
max-width: 1330px;
11+
display: flex;
12+
align-items: center;
13+
flex: 1;
14+
padding: 0 35px 0;
15+
16+
font-family: "Onest-Regular", sans-serif;
17+
font-size: 15px;
1818
}
1919

2020
.logo {
21-
margin-bottom: 2px;
22-
line-height: 0;
21+
margin-bottom: 2px;
22+
line-height: 0;
2323
}
2424

2525
.navBar {
26-
display: flex;
27-
justify-content: center;
28-
list-style: none;
29-
margin: 0;
30-
31-
padding: 0 40px 0;
32-
gap: 30px;
33-
34-
.menuItem {
35-
cursor: pointer;
36-
color: var(--ant-color-text-placeholder);
37-
38-
&:hover {
39-
color: var(--ant-color-text-base);
40-
}
41-
}
42-
43-
.activeMenuItem {
44-
font-family: 'Onest-Medium', sans-serif;
45-
color: var(--ant-color-text-base);
46-
}
26+
display: flex;
27+
justify-content: center;
28+
list-style: none;
29+
margin: 0;
30+
31+
padding: 0 40px 0;
32+
gap: 30px;
33+
34+
.menuItem {
35+
cursor: pointer;
36+
color: var(--ant-color-text-placeholder);
37+
38+
&:hover {
39+
color: var(--ant-color-text-base);
40+
}
41+
}
42+
43+
.activeMenuItem {
44+
font-family: "Onest-Medium", sans-serif;
45+
color: var(--ant-color-text-base);
46+
}
4747
}
4848

4949
.blank {
50-
flex: 1;
50+
flex: 1;
5151
}
5252

5353
.containerSearch {
54-
width: 403px
54+
width: 403px;
5555
}
5656

5757
.miniContainerSearch {
58-
width: 395px;
59-
display: flex;
60-
align-items: center;
61-
62-
svg {
63-
position: relative;
64-
left: -30px;
65-
pointer-events: none;
66-
}
58+
width: 395px;
59+
display: flex;
60+
align-items: center;
61+
62+
svg {
63+
position: relative;
64+
left: -30px;
65+
pointer-events: none;
66+
}
6767
}
6868

6969
.search {
70-
width: 378px;
71-
height: 36px;
72-
padding-left: 15px;
73-
border-radius: 38px;
74-
75-
background: #F1F4F6;
76-
outline: none;
77-
border: none;
78-
79-
&::placeholder {
80-
color: var(--ant-color-text-placeholder);
81-
}
70+
width: 378px;
71+
height: 36px;
72+
padding-left: 15px;
73+
border-radius: 38px;
74+
75+
background: #f1f4f6;
76+
outline: none;
77+
border: none;
78+
79+
&::placeholder {
80+
color: var(--ant-color-text-placeholder);
81+
}
8282
}
8383

8484
.avatar {
85-
max-width: 36px;
86-
min-width: 36px !important;
87-
height: 36px;
85+
max-width: 36px;
86+
min-width: 36px !important;
87+
height: 36px;
8888
}
89-
90-

‎src/entry-client.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import {hydrateRoot} from "react-dom/client";
2-
import {App} from "./App.tsx";
1+
import { hydrateRoot } from "react-dom/client";
2+
import { App } from "./App.tsx";
33

44
hydrateRoot(
55
document.getElementById("sharebook") as HTMLElement,
6-
<App location={location.href}/>,
7-
)
6+
<App location={location.href} />,
7+
);

‎src/entry-server.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import {renderToString} from "react-dom/server";
2-
import {App} from "./App";
3-
import {createCache, extractStyle} from "@ant-design/cssinjs";
1+
import { renderToString } from "react-dom/server";
2+
import { App } from "./App";
3+
import { createCache, extractStyle } from "@ant-design/cssinjs";
44
import type Entity from "@ant-design/cssinjs/es/Cache";
55

66
export function render(location: string) {
77
const cache: Entity = createCache();
88

9-
const body = renderToString(<App cache={cache} location={location}/>);
9+
const body = renderToString(<App cache={cache} location={location} />);
1010

1111
const head = extractStyle(cache);
1212

13-
return {body, head};
13+
return { body, head };
1414
}

‎src/index.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
@font-face {
2-
font-family: 'Literata-Medium';
3-
src: url('./fonts/Literata-Medium.woff') format('woff');
2+
font-family: "Literata-Medium";
3+
src: url("./fonts/Literata-Medium.woff") format("woff");
44
}
55

66
@font-face {
7-
font-family: 'Onest-Medium';
8-
src: url('./fonts/Onest-Medium.woff') format('woff');
7+
font-family: "Onest-Medium";
8+
src: url("./fonts/Onest-Medium.woff") format("woff");
99
}
1010

1111
@font-face {
12-
font-family: 'Onest-Regular';
13-
src: url('./fonts/Onest-Regular.woff') format('woff');
14-
}
12+
font-family: "Onest-Regular";
13+
src: url("./fonts/Onest-Regular.woff") format("woff");
14+
}

‎src/pages/auth/auth.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
justify-content: center;
66
align-items: center;
77
flex-direction: column;
8-
}
8+
}

‎src/pages/home/components/BookCard/BookCardComponent.tsx

-43
This file was deleted.

‎src/pages/home/components/BookCard/bookCard.module.scss

+36-46
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,50 @@
11
.container {
2-
margin-top: 30px;
2+
margin-top: 30px;
33

4-
display: grid;
5-
grid-template-columns: repeat(5, auto);
6-
gap: 30px;
7-
}
8-
9-
.card {
10-
width: 242px;
11-
//height: 460px;
12-
//padding: 20px 20px 15px 20px;
13-
//border-radius: 10px;
14-
//transition: 0.2s;
15-
//
16-
//&:hover {
17-
// box-shadow: 0 0 15px rgb(0, 0, 0, 0.15);
18-
// transition: 0.2s;
19-
//}
4+
display: grid;
5+
grid-template-columns: repeat(5, auto);
6+
gap: 30px;
207
}
218

229
.containerImage {
23-
padding: 20px 20px 0;
10+
width: 202px !important;
11+
height: 304px;
12+
padding: 20px 20px 0;
13+
14+
img {
15+
height: 304px;
16+
}
2417
}
2518

2619
.containerContent {
27-
display: flex;
28-
flex-direction: column;
29-
padding: 0 20px 20px;
30-
31-
//img {
32-
// box-shadow: 3px 0 5px rgb(0, 0, 0, 0.25);
33-
//}
20+
display: flex;
21+
flex-direction: column;
22+
padding: 0 20px 15px;
23+
margin-top: 9px;
3424
}
3525

3626
.containerInfoBook {
37-
display: flex;
38-
flex-direction: column;
39-
margin-top: 9px;
40-
gap: 7px;
41-
42-
div {
43-
font-family: 'Literata-Medium', sans-serif;
44-
line-height: 135%;
45-
color: var(--ant-color-text-base);
46-
}
47-
48-
a {
49-
font-family: 'Onest-Medium', sans-serif;
50-
text-decoration: underline;
51-
color: var(--ant-color-primary);
52-
}
27+
display: flex;
28+
flex-direction: column;
29+
gap: 7px;
30+
31+
.title {
32+
line-height: 135%;
33+
font-family: "Literata-Medium", sans-serif;
34+
color: var(--ant-color-text-base);
35+
}
36+
37+
.author {
38+
font-family: "Onest-Medium", sans-serif;
39+
text-decoration: underline;
40+
color: var(--ant-color-primary);
41+
line-height: 19px;
42+
}
5343
}
5444

5545
.location {
56-
margin: 11px 0 0;
57-
line-height: 135%;
58-
font-family: 'Onest-Regular', sans-serif;
59-
color: var(--ant-color-text-placeholder);
60-
}
46+
margin: 11px 0 0;
47+
line-height: 135%;
48+
font-family: "Onest-Regular", sans-serif;
49+
color: var(--ant-color-text-placeholder);
50+
}

‎src/pages/home/components/BookCard/books.json

+123-123
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,124 @@
11
{
2-
"data": [
3-
{
4-
"path": "/assets/image/Image2.png",
5-
"title": "Старик и море, Зеленые холмы Африки",
6-
"author": "Эрнест Хэмингуэй",
7-
"location": "Санкт-Петербург, Московский район",
8-
"transferType": "exchange",
9-
"gene": "roman"
10-
},
11-
{
12-
"path": "/assets/image/Image1.png",
13-
"title": "Тетушка Хулия и Писалка",
14-
"author": "Марио Варгос Льосе",
15-
"location": "Санкт-Петербург, Озерки",
16-
"transferType": "give",
17-
"gene": "art"
18-
},
19-
{
20-
"path": "/assets/image/Image3.png",
21-
"title": "Три товарища",
22-
"author": "Эрих Мария Ремарк",
23-
"location": "Санкт-Петербург, Кировский район",
24-
"transferType": "give",
25-
"gene": "art"
26-
},
27-
{
28-
"path": "/assets/image/Image4.png",
29-
"title": "Краткие ответы на большие вопросы",
30-
"author": "Стивен Хокинг",
31-
"location": "Санкт-Петербург, Невский район",
32-
"transferType": "exchange",
33-
"gene": "scientific"
34-
},
35-
{
36-
"path": "/assets/image/Image5.png",
37-
"title": "Интервальное голодание",
38-
"author": "Джейсон Фанг",
39-
"location": "Санкт-Петербург, Кировский район",
40-
"transferType": "give",
41-
"gene": "scientific"
42-
},
43-
{
44-
"path": "/assets/image/Image2.png",
45-
"title": "Старик и море, Зеленые холмы Африки",
46-
"author": "Эрнест Хэмингуэй",
47-
"location": "Санкт-Петербург, Московский район",
48-
"transferType": "exchange",
49-
"gene": "roman"
50-
},
51-
{
52-
"path": "/assets/image/Image1.png",
53-
"title": "Тетушка Хулия и Писалка",
54-
"author": "Марио Варгос Льосе",
55-
"location": "Санкт-Петербург, Озерки",
56-
"transferType": "give",
57-
"gene": "art"
58-
},
59-
{
60-
"path": "/assets/image/Image3.png",
61-
"title": "Три товарища",
62-
"author": "Эрих Мария Ремарк",
63-
"location": "Санкт-Петербург, Кировский район",
64-
"transferType": "give",
65-
"gene": "art"
66-
},
67-
{
68-
"path": "/assets/image/Image4.png",
69-
"title": "Краткие ответы на большие вопросы",
70-
"author": "Стивен Хокинг",
71-
"location": "Санкт-Петербург, Невский район",
72-
"transferType": "exchange",
73-
"gene": "scientific"
74-
},
75-
{
76-
"path": "/assets/image/Image5.png",
77-
"title": "Интервальное голодание",
78-
"author": "Джейсон Фанг",
79-
"location": "Санкт-Петербург, Кировский район",
80-
"transferType": "give",
81-
"gene": "scientific"
82-
},
83-
{
84-
"path": "/assets/image/Image2.png",
85-
"title": "Старик и море, Зеленые холмы Африки",
86-
"author": "Эрнест Хэмингуэй",
87-
"location": "Санкт-Петербург, Московский район",
88-
"transferType": "exchange",
89-
"gene": "roman"
90-
},
91-
{
92-
"path": "/assets/image/Image1.png",
93-
"title": "Тетушка Хулия и Писалка",
94-
"author": "Марио Варгос Льосе",
95-
"location": "Санкт-Петербург, Озерки",
96-
"transferType": "give",
97-
"gene": "art"
98-
},
99-
{
100-
"path": "/assets/image/Image3.png",
101-
"title": "Три товарища",
102-
"author": "Эрих Мария Ремарк",
103-
"location": "Санкт-Петербург, Кировский район",
104-
"transferType": "give",
105-
"gene": "art"
106-
},
107-
{
108-
"path": "/assets/image/Image4.png",
109-
"title": "Краткие ответы на большие вопросы",
110-
"author": "Стивен Хокинг",
111-
"location": "Санкт-Петербург, Невский район",
112-
"transferType": "exchange",
113-
"gene": "scientific"
114-
},
115-
{
116-
"path": "/assets/image/Image5.png",
117-
"title": "Интервальное голодание",
118-
"author": "Джейсон Фанг",
119-
"location": "Санкт-Петербург, Кировский район",
120-
"transferType": "give",
121-
"gene": "scientific"
122-
}
123-
]
124-
}
2+
"data": [
3+
{
4+
"id": "0",
5+
"title": "Старик и море, Зеленые холмы Африки",
6+
"author": "Эрнест Хэмингуэй",
7+
"location": "Санкт-Петербург, Московский район",
8+
"transferType": "exchange",
9+
"gene": "roman"
10+
},
11+
{
12+
"id": "1",
13+
"title": "Тетушка Хулия и Писалка",
14+
"author": "Марио Варгос Льосе",
15+
"location": "Санкт-Петербург, Озерки",
16+
"transferType": "give",
17+
"gene": "art"
18+
},
19+
{
20+
"id": "2",
21+
"title": "Три товарища",
22+
"author": "Эрих Мария Ремарк",
23+
"location": "Санкт-Петербург, Кировский район",
24+
"transferType": "give",
25+
"gene": "art"
26+
},
27+
{
28+
"id": "3",
29+
"title": "Краткие ответы на большие вопросы",
30+
"author": "Стивен Хокинг",
31+
"location": "Санкт-Петербург, Невский район",
32+
"transferType": "exchange",
33+
"gene": "scientific"
34+
},
35+
{
36+
"id": "4",
37+
"title": "Интервальное голодание",
38+
"author": "Джейсон Фанг",
39+
"location": "Санкт-Петербург, Кировский район",
40+
"transferType": "give",
41+
"gene": "scientific"
42+
},
43+
{
44+
"id": "5",
45+
"title": "Старик и море, Зеленые холмы Африки",
46+
"author": "Эрнест Хэмингуэй",
47+
"location": "Санкт-Петербург, Московский район",
48+
"transferType": "exchange",
49+
"gene": "roman"
50+
},
51+
{
52+
"id": "6",
53+
"title": "Тетушка Хулия и Писалка",
54+
"author": "Марио Варгос Льосе",
55+
"location": "Санкт-Петербург, Озерки",
56+
"transferType": "give",
57+
"gene": "art"
58+
},
59+
{
60+
"id": "7",
61+
"title": "Три товарища",
62+
"author": "Эрих Мария Ремарк",
63+
"location": "Санкт-Петербург, Кировский район",
64+
"transferType": "give",
65+
"gene": "art"
66+
},
67+
{
68+
"id": "8",
69+
"title": "Краткие ответы на большие вопросы",
70+
"author": "Стивен Хокинг",
71+
"location": "Санкт-Петербург, Невский район",
72+
"transferType": "exchange",
73+
"gene": "scientific"
74+
},
75+
{
76+
"id": "9",
77+
"title": "Интервальное голодание",
78+
"author": "Джейсон Фанг",
79+
"location": "Санкт-Петербург, Кировский район",
80+
"transferType": "give",
81+
"gene": "scientific"
82+
},
83+
{
84+
"id": "10",
85+
"title": "Старик и море, Зеленые холмы Африки",
86+
"author": "Эрнест Хэмингуэй",
87+
"location": "Санкт-Петербург, Московский район",
88+
"transferType": "exchange",
89+
"gene": "roman"
90+
},
91+
{
92+
"id": "11",
93+
"title": "Тетушка Хулия и Писалка",
94+
"author": "Марио Варгос Льосе",
95+
"location": "Санкт-Петербург, Озерки",
96+
"transferType": "give",
97+
"gene": "art"
98+
},
99+
{
100+
"id": "12",
101+
"title": "Три товарища",
102+
"author": "Эрих Мария Ремарк",
103+
"location": "Санкт-Петербург, Кировский район",
104+
"transferType": "give",
105+
"gene": "art"
106+
},
107+
{
108+
"id": "13",
109+
"title": "Краткие ответы на большие вопросы",
110+
"author": "Стивен Хокинг",
111+
"location": "Санкт-Петербург, Невский район",
112+
"transferType": "exchange",
113+
"gene": "scientific"
114+
},
115+
{
116+
"id": "14",
117+
"title": "Интервальное голодание",
118+
"author": "Джейсон Фанг",
119+
"location": "Санкт-Петербург, Кировский район",
120+
"transferType": "give",
121+
"gene": "scientific"
122+
}
123+
]
124+
}

‎src/pages/home/components/BookCard/components/BookCard.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import styles from "../bookCard.module.scss";
2+
import { Card } from "antd";
3+
import img1 from "../img/Image1.png";
4+
import img2 from "../img/Image2.png";
5+
6+
interface Books {
7+
id: string;
8+
path?: string;
9+
title: string;
10+
author: string;
11+
location: string;
12+
transferType: string;
13+
gene: string;
14+
}
15+
16+
export function BookCard({ books }: { books: Books[] }) {
17+
return (
18+
<>
19+
{books.map((book) => (
20+
<Card
21+
key={book.id}
22+
cover={
23+
<div className={styles.containerImage}>
24+
<img alt={book.title} src={img2 || img1} />
25+
</div>
26+
}
27+
hoverable
28+
className={styles.card}
29+
>
30+
<div className={styles.containerContent}>
31+
<div className={styles.containerInfoBook}>
32+
<div className={styles.title}>{book.title}</div>
33+
<a className={styles.author}>{book.author}</a>
34+
</div>
35+
<p className={styles.location}>{book.location}</p>
36+
</div>
37+
</Card>
38+
))}
39+
</>
40+
);
41+
}

‎src/pages/home/components/BookCard/components/BookCardComponent.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styles from "../bookCard.module.scss";
2+
import data from "../books.json";
3+
import { BookCard } from "./BookCard.tsx";
4+
5+
const books = data.data;
6+
7+
export function BookCardComponent() {
8+
return (
9+
<div className={styles.container}>
10+
<BookCard books={books} />
11+
</div>
12+
);
13+
}

‎src/pages/home/components/BookCard/img/Image1.png

62.9 KB
Loading

‎src/pages/home/components/BookCard/img/Image2.png

75 KB
Loading

‎src/pages/home/components/BookCard/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { BookCardComponent } from './BookCardComponent.tsx';
1+
export { BookCardComponent } from "./components/BookCardComponent.tsx";

‎src/pages/home/components/Filter/FilterComponent.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styles from "./filter.module.scss";
2-
import {FilterGenre} from "./components/FilterGenre.tsx";
3-
import {FilterType} from "./components/FilterType.tsx";
2+
import { FilterGenre } from "./components/FilterGenre.tsx";
3+
import { FilterType } from "./components/FilterType.tsx";
44

55
export function FilterComponent() {
66
return (

‎src/pages/home/components/Filter/components/FilterGenre.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NavLink , useSearchParams} from "react-router";
1+
import { NavLink, useSearchParams } from "react-router";
22
import styles from "../filter.module.scss";
33

44
interface Genre {
@@ -7,13 +7,13 @@ interface Genre {
77
}
88

99
const genres: Genre[] = [
10-
{title: "Все", url: "/"},
11-
{title: "От ShareBook", url: "/filter/FromShareBook"},
12-
{title: "Детективы", url: "/filter/Detectives"},
13-
{title: "Романы", url: "/filter/Novels"},
14-
{title: "Научные", url: "/filter/Scientific"},
15-
{title: "Исскуство", url: "/filter/Art"},
16-
{title: "Учебные", url: "/filter/Tutorials"},
10+
{ title: "Все", url: "/" },
11+
{ title: "От ShareBook", url: "/filter/FromShareBook" },
12+
{ title: "Детективы", url: "/filter/Detectives" },
13+
{ title: "Романы", url: "/filter/Novels" },
14+
{ title: "Научные", url: "/filter/Scientific" },
15+
{ title: "Исскуство", url: "/filter/Art" },
16+
{ title: "Учебные", url: "/filter/Tutorials" },
1717
];
1818

1919
export function FilterGenre() {
@@ -24,7 +24,7 @@ export function FilterGenre() {
2424
{genres.map((genre, idx) => (
2525
<NavLink
2626
key={idx}
27-
to={{pathname: genre.url, search: searchParams.toString()}}
27+
to={{ pathname: genre.url, search: searchParams.toString() }}
2828
className={(isActive) =>
2929
isActive.isActive
3030
? `${styles.buttonGenre} ${styles.buttonActive}`

‎src/pages/home/components/Filter/components/FilterType.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import {Dropdown} from "antd";
1+
import { Dropdown } from "antd";
22
import styles from "../filter.module.scss";
3-
import {useState} from "react";
4-
import {SvgArrow} from "../svg/SvgArrow.tsx";
5-
import {useSearchParams} from "react-router";
3+
import { useState } from "react";
4+
import { SvgArrow } from "../svg/SvgArrow.tsx";
5+
import { useSearchParams } from "react-router";
66

77
interface Type {
88
label: string;
@@ -39,7 +39,8 @@ export function FilterType() {
3939
onOpenChange={(vis) => setShowListState(vis)}
4040
>
4141
<button className={styles.buttonTypeFilter}>
42-
{types.find((item) => item.key === filterType)?.label ?? defaultType.label}
42+
{types.find((item) => item.key === filterType)?.label ??
43+
defaultType.label}
4344
<SvgArrow showListState={showListState} />
4445
</button>
4546
</Dropdown>

‎src/pages/home/components/Filter/filter.module.scss

+44-44
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,73 @@
11
.container {
2-
display: flex;
3-
justify-content: space-between;
4-
margin-top: 20px;
2+
display: flex;
3+
justify-content: space-between;
4+
margin-top: 20px;
55
}
66

77
.containerGenres {
8-
display: flex;
9-
font-family: 'Onest-Medium', sans-serif;
10-
font-size: 15px;
8+
display: flex;
9+
font-family: "Onest-Medium", sans-serif;
10+
font-size: 15px;
1111
}
1212

1313
.buttonGenre {
14-
display: flex;
15-
justify-content: center;
16-
align-items: center;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
1717

18-
height: 40px;
19-
padding-left: 25px;
20-
padding-right: 25px;
21-
border-radius: 11px;
18+
height: 40px;
19+
padding-left: 25px;
20+
padding-right: 25px;
21+
border-radius: 11px;
2222
}
2323

2424
.buttonDefault {
25-
cursor: pointer;
26-
background: unset;
27-
color: var(--ant-color-text-placeholder);
28-
transition: 0.2s all ease;
25+
cursor: pointer;
26+
background: unset;
27+
color: var(--ant-color-text-placeholder);
28+
transition: 0.2s all ease;
2929

30-
&:hover {
31-
transition: 0.2s all ease;
32-
color: var(--ant-color-text-base);
33-
}
30+
&:hover {
31+
transition: 0.2s all ease;
32+
color: var(--ant-color-text-base);
33+
}
3434
}
3535

3636
.buttonActive {
37-
pointer-events: none;
38-
background: var(--ant-color-primary);
39-
color: #FFFFFF;
37+
pointer-events: none;
38+
background: var(--ant-color-primary);
39+
color: #ffffff;
4040
}
4141

4242
.buttonTypeFilter {
43-
display: flex;
44-
align-items: center;
45-
justify-content: center;
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
4646

47-
gap: 66px;
48-
min-width: 159px;
49-
padding: 0 21px 0;
50-
height: 40px;
51-
border-radius: 11px;
47+
gap: 66px;
48+
min-width: 159px;
49+
padding: 0 21px 0;
50+
height: 40px;
51+
border-radius: 11px;
5252

53-
cursor: pointer;
54-
border: none;
55-
font-family: "Onest-Regular", sans-serif;
56-
background: rgb(241, 244, 246, 80%);
57-
color: var(--ant-color-primary);
53+
cursor: pointer;
54+
border: none;
55+
font-family: "Onest-Regular", sans-serif;
56+
background: rgba(241, 244, 246, 80%);
57+
color: var(--ant-color-primary);
5858
}
5959

6060
.svgDefault {
61-
transition: .2s;
61+
transition: 0.2s;
6262
}
6363

6464
.svgActive {
65-
rotate: 180deg;
65+
rotate: 180deg;
6666
}
6767

6868
.typeFilter {
69-
backdrop-filter: blur(50px);
70-
ul {
71-
margin-top: 2px !important;
72-
}
73-
}
69+
backdrop-filter: blur(50px);
70+
ul {
71+
margin-top: 2px !important;
72+
}
73+
}

‎src/pages/home/home.module.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.container {
2-
max-width: 1400px;
3-
padding: 0 35px 0;
4-
margin: auto;
5-
}
2+
max-width: 1330px;
3+
padding: 0 35px 0;
4+
margin: auto;
5+
}

‎tsconfig.app.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,5 @@
2222
"noFallthroughCasesInSwitch": true,
2323
"noUncheckedSideEffectImports": true
2424
},
25-
"include": [
26-
"src"
27-
]
25+
"include": ["src"]
2826
}

‎tsconfig.node.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,5 @@
2020
"noFallthroughCasesInSwitch": true,
2121
"noUncheckedSideEffectImports": true
2222
},
23-
"include": [
24-
"vite.config.ts"
25-
]
23+
"include": ["vite.config.ts"]
2624
}

‎vite.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {defineConfig} from "vite";
1+
import { defineConfig } from "vite";
22
import react from "@vitejs/plugin-react";
33

44
export default defineConfig({

0 commit comments

Comments
 (0)
Please sign in to comment.