diff --git a/README.md b/README.md index 74872fd..780c92d 100644 --- a/README.md +++ b/README.md @@ -18,11 +18,11 @@ export default tseslint.config({ languageOptions: { // other options... parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], + project: ["./tsconfig.node.json", "./tsconfig.app.json"], tsconfigRootDir: import.meta.dirname, }, }, -}) +}); ``` - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` @@ -31,11 +31,11 @@ export default tseslint.config({ ```js // eslint.config.js -import react from 'eslint-plugin-react' +import react from "eslint-plugin-react"; export default tseslint.config({ // Set the react version - settings: { react: { version: '18.3' } }, + settings: { react: { version: "18.3" } }, plugins: { // Add the react plugin react, @@ -44,7 +44,7 @@ export default tseslint.config({ // other rules... // Enable its recommended rules ...react.configs.recommended.rules, - ...react.configs['jsx-runtime'].rules, + ...react.configs["jsx-runtime"].rules, }, -}) +}); ``` diff --git a/eslint.config.js b/eslint.config.js index 092408a..79a552e 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,28 +1,28 @@ -import js from '@eslint/js' -import globals from 'globals' -import reactHooks from 'eslint-plugin-react-hooks' -import reactRefresh from 'eslint-plugin-react-refresh' -import tseslint from 'typescript-eslint' +import js from "@eslint/js"; +import globals from "globals"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; +import tseslint from "typescript-eslint"; export default tseslint.config( - { ignores: ['dist'] }, + { ignores: ["dist"] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], - files: ['**/*.{ts,tsx}'], + files: ["**/*.{ts,tsx}"], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { - 'react-hooks': reactHooks, - 'react-refresh': reactRefresh, + "react-hooks": reactHooks, + "react-refresh": reactRefresh, }, rules: { ...reactHooks.configs.recommended.rules, - 'react-refresh/only-export-components': [ - 'warn', + "react-refresh/only-export-components": [ + "warn", { allowConstantExport: true }, ], }, }, -) +); diff --git a/index.html b/index.html index 03c46e7..22bc2c1 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ -
- +
+ diff --git a/src/antdConfig.ts b/src/antdConfig.ts index a52c719..5ba9952 100644 --- a/src/antdConfig.ts +++ b/src/antdConfig.ts @@ -1,4 +1,4 @@ -import type {ThemeConfig} from "antd"; +import type { ThemeConfig } from "antd"; export const antdThemeConfig: ThemeConfig = { cssVar: true, @@ -18,7 +18,7 @@ export const antdThemeConfig: ThemeConfig = { }, Input: { colorText: "#000000", - activeBorderColor: "rgb(42, 127, 255, 80)", + activeBorderColor: "rgba(42, 127, 255, 80)", fontFamily: "Onest-Regular", hoverBorderColor: "transparent", colorBorder: "transparent", @@ -30,15 +30,15 @@ export const antdThemeConfig: ThemeConfig = { Dropdown: { paddingBlock: 6, controlPaddingHorizontal: 10, - boxShadowSecondary: "0px 2px 7px rgb(0, 0, 0, 0.15)", + boxShadowSecondary: "0px 2px 7px rgba(0, 0, 0, 0.15)", fontFamily: "Onest-Regular", colorBgElevated: "#FFFFFF", }, Card: { paddingLG: 0, borderRadiusLG: 10, - boxShadow: "0px 20px 7px rgb(42, 127, 255, 80)", - boxShadowTertiary: "0px 2px 7px rgb(42, 127, 255, 80)", + boxShadow: "0px 20px 7px rgba(42, 127, 255, 80)", + boxShadowTertiary: "0px 2px 7px rgba(42, 127, 255, 80)", colorBgContainer: "#FFFFFF", }, }, diff --git a/src/components/Header/components/Avatar.tsx b/src/components/Header/components/Avatar.tsx index 4786b2b..5283ec9 100644 --- a/src/components/Header/components/Avatar.tsx +++ b/src/components/Header/components/Avatar.tsx @@ -1,6 +1,6 @@ import styles from "../header.module.scss"; -import {Button} from "antd"; -import {SvgAvatar} from "../svg/SvgAvatar.tsx"; +import { Button } from "antd"; +import { SvgAvatar } from "../svg/SvgAvatar.tsx"; export function Avatar() { return ( diff --git a/src/components/Header/components/Logo.tsx b/src/components/Header/components/Logo.tsx index 776d5de..b08a2d1 100644 --- a/src/components/Header/components/Logo.tsx +++ b/src/components/Header/components/Logo.tsx @@ -1,5 +1,5 @@ -import {Link} from "react-router"; -import {SvgLogo} from "../svg/SvgLogo.tsx"; +import { Link } from "react-router"; +import { SvgLogo } from "../svg/SvgLogo.tsx"; import styles from "../header.module.scss"; export function Logo() { diff --git a/src/components/Header/components/Nav.tsx b/src/components/Header/components/Nav.tsx index d6dc003..f20657a 100644 --- a/src/components/Header/components/Nav.tsx +++ b/src/components/Header/components/Nav.tsx @@ -1,5 +1,5 @@ import styles from "../header.module.scss"; -import {NavLink} from "react-router"; +import { NavLink } from "react-router"; interface MainMenuItem { title: string; diff --git a/src/components/Header/components/Search.tsx b/src/components/Header/components/Search.tsx index c9ca1df..d42d8db 100644 --- a/src/components/Header/components/Search.tsx +++ b/src/components/Header/components/Search.tsx @@ -1,6 +1,6 @@ import styles from "../header.module.scss"; -import {Input} from "antd"; -import {SvgSearch} from "../svg/SvgSearch.tsx"; +import { Input } from "antd"; +import { SvgSearch } from "../svg/SvgSearch.tsx"; export function Search() { return ( diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss index 0a98525..6d5620c 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -1,90 +1,88 @@ .header { - background: rgb(250, 250, 250, 80%); - border-bottom: 1px solid var(--ant-color-bg-container); - display: flex; - justify-content: center; - height: 66px; + background: rgba(250, 250, 250, 80%); + border-bottom: 1px solid var(--ant-color-bg-container); + display: flex; + justify-content: center; + height: 66px; } .container { - max-width: 1400px; - display: flex; - align-items: center; - flex: 1; - padding: 0 35px 0 35px; - - font-family: 'Onest-Regular', sans-serif; - font-size: 15px; + max-width: 1330px; + display: flex; + align-items: center; + flex: 1; + padding: 0 35px 0; + + font-family: "Onest-Regular", sans-serif; + font-size: 15px; } .logo { - margin-bottom: 2px; - line-height: 0; + margin-bottom: 2px; + line-height: 0; } .navBar { - display: flex; - justify-content: center; - list-style: none; - margin: 0; - - padding: 0 40px 0; - gap: 30px; - - .menuItem { - cursor: pointer; - color: var(--ant-color-text-placeholder); - - &:hover { - color: var(--ant-color-text-base); - } - } - - .activeMenuItem { - font-family: 'Onest-Medium', sans-serif; - color: var(--ant-color-text-base); - } + display: flex; + justify-content: center; + list-style: none; + margin: 0; + + padding: 0 40px 0; + gap: 30px; + + .menuItem { + cursor: pointer; + color: var(--ant-color-text-placeholder); + + &:hover { + color: var(--ant-color-text-base); + } + } + + .activeMenuItem { + font-family: "Onest-Medium", sans-serif; + color: var(--ant-color-text-base); + } } .blank { - flex: 1; + flex: 1; } .containerSearch { - width: 403px + width: 403px; } .miniContainerSearch { - width: 395px; - display: flex; - align-items: center; - - svg { - position: relative; - left: -30px; - pointer-events: none; - } + width: 395px; + display: flex; + align-items: center; + + svg { + position: relative; + left: -30px; + pointer-events: none; + } } .search { - width: 378px; - height: 36px; - padding-left: 15px; - border-radius: 38px; - - background: #F1F4F6; - outline: none; - border: none; - - &::placeholder { - color: var(--ant-color-text-placeholder); - } + width: 378px; + height: 36px; + padding-left: 15px; + border-radius: 38px; + + background: #f1f4f6; + outline: none; + border: none; + + &::placeholder { + color: var(--ant-color-text-placeholder); + } } .avatar { - max-width: 36px; - min-width: 36px !important; - height: 36px; + max-width: 36px; + min-width: 36px !important; + height: 36px; } - - diff --git a/src/entry-client.tsx b/src/entry-client.tsx index e261f14..c671d1c 100644 --- a/src/entry-client.tsx +++ b/src/entry-client.tsx @@ -1,7 +1,7 @@ -import {hydrateRoot} from "react-dom/client"; -import {App} from "./App.tsx"; +import { hydrateRoot } from "react-dom/client"; +import { App } from "./App.tsx"; hydrateRoot( document.getElementById("sharebook") as HTMLElement, - , -) + , +); diff --git a/src/entry-server.tsx b/src/entry-server.tsx index d251ed2..99eda66 100644 --- a/src/entry-server.tsx +++ b/src/entry-server.tsx @@ -1,14 +1,14 @@ -import {renderToString} from "react-dom/server"; -import {App} from "./App"; -import {createCache, extractStyle} from "@ant-design/cssinjs"; +import { renderToString } from "react-dom/server"; +import { App } from "./App"; +import { createCache, extractStyle } from "@ant-design/cssinjs"; import type Entity from "@ant-design/cssinjs/es/Cache"; export function render(location: string) { const cache: Entity = createCache(); - const body = renderToString(); + const body = renderToString(); const head = extractStyle(cache); - return {body, head}; + return { body, head }; } diff --git a/src/index.css b/src/index.css index 1d8801d..faac4ee 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,14 @@ @font-face { - font-family: 'Literata-Medium'; - src: url('./fonts/Literata-Medium.woff') format('woff'); + font-family: "Literata-Medium"; + src: url("./fonts/Literata-Medium.woff") format("woff"); } @font-face { - font-family: 'Onest-Medium'; - src: url('./fonts/Onest-Medium.woff') format('woff'); + font-family: "Onest-Medium"; + src: url("./fonts/Onest-Medium.woff") format("woff"); } @font-face { - font-family: 'Onest-Regular'; - src: url('./fonts/Onest-Regular.woff') format('woff'); -} \ No newline at end of file + font-family: "Onest-Regular"; + src: url("./fonts/Onest-Regular.woff") format("woff"); +} diff --git a/src/pages/auth/auth.module.scss b/src/pages/auth/auth.module.scss index 7d5af97..09f62dc 100644 --- a/src/pages/auth/auth.module.scss +++ b/src/pages/auth/auth.module.scss @@ -5,4 +5,4 @@ justify-content: center; align-items: center; flex-direction: column; -} \ No newline at end of file +} diff --git a/src/pages/home/components/BookCard/BookCardComponent.tsx b/src/pages/home/components/BookCard/BookCardComponent.tsx deleted file mode 100644 index 869b16a..0000000 --- a/src/pages/home/components/BookCard/BookCardComponent.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import styles from "./bookCard.module.scss"; -// import data from "./books.json"; -import { Card } from "antd"; - -// const books = data.data; - -export function BookCardComponent() { - return ( -
- {/*Первый способ реализации. Минусы: не получается настроить boxShadow*/} - - example -
- } - hoverable - className={styles.card} - > -
-
-
Старик и море, Зеленые холмы Африки
- Эрнест Хэмингуэй -
-

Санкт-Петербург, Московский район

-
- - - {/*{books.map((book, idx) => (*/} - {/*
*/} - {/*
*/} - {/* example*/} - {/*
*/} - {/*
{book.title}
*/} - {/* {book.author}*/} - {/*
*/} - {/*

{book.location}

*/} - {/*
*/} - {/*
*/} - {/*))}*/} - - ); -} diff --git a/src/pages/home/components/BookCard/bookCard.module.scss b/src/pages/home/components/BookCard/bookCard.module.scss index a0a9c5c..8b45607 100644 --- a/src/pages/home/components/BookCard/bookCard.module.scss +++ b/src/pages/home/components/BookCard/bookCard.module.scss @@ -1,60 +1,50 @@ .container { - margin-top: 30px; + margin-top: 30px; - display: grid; - grid-template-columns: repeat(5, auto); - gap: 30px; -} - -.card { - width: 242px; - //height: 460px; - //padding: 20px 20px 15px 20px; - //border-radius: 10px; - //transition: 0.2s; - // - //&:hover { - // box-shadow: 0 0 15px rgb(0, 0, 0, 0.15); - // transition: 0.2s; - //} + display: grid; + grid-template-columns: repeat(5, auto); + gap: 30px; } .containerImage { - padding: 20px 20px 0; + width: 202px !important; + height: 304px; + padding: 20px 20px 0; + + img { + height: 304px; + } } .containerContent { - display: flex; - flex-direction: column; - padding: 0 20px 20px; - - //img { - // box-shadow: 3px 0 5px rgb(0, 0, 0, 0.25); - //} + display: flex; + flex-direction: column; + padding: 0 20px 15px; + margin-top: 9px; } .containerInfoBook { - display: flex; - flex-direction: column; - margin-top: 9px; - gap: 7px; - - div { - font-family: 'Literata-Medium', sans-serif; - line-height: 135%; - color: var(--ant-color-text-base); - } - - a { - font-family: 'Onest-Medium', sans-serif; - text-decoration: underline; - color: var(--ant-color-primary); - } + display: flex; + flex-direction: column; + gap: 7px; + + .title { + line-height: 135%; + font-family: "Literata-Medium", sans-serif; + color: var(--ant-color-text-base); + } + + .author { + font-family: "Onest-Medium", sans-serif; + text-decoration: underline; + color: var(--ant-color-primary); + line-height: 19px; + } } .location { - margin: 11px 0 0; - line-height: 135%; - font-family: 'Onest-Regular', sans-serif; - color: var(--ant-color-text-placeholder); -} \ No newline at end of file + margin: 11px 0 0; + line-height: 135%; + font-family: "Onest-Regular", sans-serif; + color: var(--ant-color-text-placeholder); +} diff --git a/src/pages/home/components/BookCard/books.json b/src/pages/home/components/BookCard/books.json index d506d90..edd8e27 100644 --- a/src/pages/home/components/BookCard/books.json +++ b/src/pages/home/components/BookCard/books.json @@ -1,124 +1,124 @@ { - "data": [ - { - "path": "/assets/image/Image2.png", - "title": "Старик и море, Зеленые холмы Африки", - "author": "Эрнест Хэмингуэй", - "location": "Санкт-Петербург, Московский район", - "transferType": "exchange", - "gene": "roman" - }, - { - "path": "/assets/image/Image1.png", - "title": "Тетушка Хулия и Писалка", - "author": "Марио Варгос Льосе", - "location": "Санкт-Петербург, Озерки", - "transferType": "give", - "gene": "art" - }, - { - "path": "/assets/image/Image3.png", - "title": "Три товарища", - "author": "Эрих Мария Ремарк", - "location": "Санкт-Петербург, Кировский район", - "transferType": "give", - "gene": "art" - }, - { - "path": "/assets/image/Image4.png", - "title": "Краткие ответы на большие вопросы", - "author": "Стивен Хокинг", - "location": "Санкт-Петербург, Невский район", - "transferType": "exchange", - "gene": "scientific" - }, - { - "path": "/assets/image/Image5.png", - "title": "Интервальное голодание", - "author": "Джейсон Фанг", - "location": "Санкт-Петербург, Кировский район", - "transferType": "give", - "gene": "scientific" - }, - { - "path": "/assets/image/Image2.png", - "title": "Старик и море, Зеленые холмы Африки", - "author": "Эрнест Хэмингуэй", - "location": "Санкт-Петербург, Московский район", - "transferType": "exchange", - "gene": "roman" - }, - { - "path": "/assets/image/Image1.png", - "title": "Тетушка Хулия и Писалка", - "author": "Марио Варгос Льосе", - "location": "Санкт-Петербург, Озерки", - "transferType": "give", - "gene": "art" - }, - { - "path": "/assets/image/Image3.png", - "title": "Три товарища", - "author": "Эрих Мария Ремарк", - "location": "Санкт-Петербург, Кировский район", - "transferType": "give", - "gene": "art" - }, - { - "path": "/assets/image/Image4.png", - "title": "Краткие ответы на большие вопросы", - "author": "Стивен Хокинг", - "location": "Санкт-Петербург, Невский район", - "transferType": "exchange", - "gene": "scientific" - }, - { - "path": "/assets/image/Image5.png", - "title": "Интервальное голодание", - "author": "Джейсон Фанг", - "location": "Санкт-Петербург, Кировский район", - "transferType": "give", - "gene": "scientific" - }, - { - "path": "/assets/image/Image2.png", - "title": "Старик и море, Зеленые холмы Африки", - "author": "Эрнест Хэмингуэй", - "location": "Санкт-Петербург, Московский район", - "transferType": "exchange", - "gene": "roman" - }, - { - "path": "/assets/image/Image1.png", - "title": "Тетушка Хулия и Писалка", - "author": "Марио Варгос Льосе", - "location": "Санкт-Петербург, Озерки", - "transferType": "give", - "gene": "art" - }, - { - "path": "/assets/image/Image3.png", - "title": "Три товарища", - "author": "Эрих Мария Ремарк", - "location": "Санкт-Петербург, Кировский район", - "transferType": "give", - "gene": "art" - }, - { - "path": "/assets/image/Image4.png", - "title": "Краткие ответы на большие вопросы", - "author": "Стивен Хокинг", - "location": "Санкт-Петербург, Невский район", - "transferType": "exchange", - "gene": "scientific" - }, - { - "path": "/assets/image/Image5.png", - "title": "Интервальное голодание", - "author": "Джейсон Фанг", - "location": "Санкт-Петербург, Кировский район", - "transferType": "give", - "gene": "scientific" - } - ] -} \ No newline at end of file + "data": [ + { + "id": "0", + "title": "Старик и море, Зеленые холмы Африки", + "author": "Эрнест Хэмингуэй", + "location": "Санкт-Петербург, Московский район", + "transferType": "exchange", + "gene": "roman" + }, + { + "id": "1", + "title": "Тетушка Хулия и Писалка", + "author": "Марио Варгос Льосе", + "location": "Санкт-Петербург, Озерки", + "transferType": "give", + "gene": "art" + }, + { + "id": "2", + "title": "Три товарища", + "author": "Эрих Мария Ремарк", + "location": "Санкт-Петербург, Кировский район", + "transferType": "give", + "gene": "art" + }, + { + "id": "3", + "title": "Краткие ответы на большие вопросы", + "author": "Стивен Хокинг", + "location": "Санкт-Петербург, Невский район", + "transferType": "exchange", + "gene": "scientific" + }, + { + "id": "4", + "title": "Интервальное голодание", + "author": "Джейсон Фанг", + "location": "Санкт-Петербург, Кировский район", + "transferType": "give", + "gene": "scientific" + }, + { + "id": "5", + "title": "Старик и море, Зеленые холмы Африки", + "author": "Эрнест Хэмингуэй", + "location": "Санкт-Петербург, Московский район", + "transferType": "exchange", + "gene": "roman" + }, + { + "id": "6", + "title": "Тетушка Хулия и Писалка", + "author": "Марио Варгос Льосе", + "location": "Санкт-Петербург, Озерки", + "transferType": "give", + "gene": "art" + }, + { + "id": "7", + "title": "Три товарища", + "author": "Эрих Мария Ремарк", + "location": "Санкт-Петербург, Кировский район", + "transferType": "give", + "gene": "art" + }, + { + "id": "8", + "title": "Краткие ответы на большие вопросы", + "author": "Стивен Хокинг", + "location": "Санкт-Петербург, Невский район", + "transferType": "exchange", + "gene": "scientific" + }, + { + "id": "9", + "title": "Интервальное голодание", + "author": "Джейсон Фанг", + "location": "Санкт-Петербург, Кировский район", + "transferType": "give", + "gene": "scientific" + }, + { + "id": "10", + "title": "Старик и море, Зеленые холмы Африки", + "author": "Эрнест Хэмингуэй", + "location": "Санкт-Петербург, Московский район", + "transferType": "exchange", + "gene": "roman" + }, + { + "id": "11", + "title": "Тетушка Хулия и Писалка", + "author": "Марио Варгос Льосе", + "location": "Санкт-Петербург, Озерки", + "transferType": "give", + "gene": "art" + }, + { + "id": "12", + "title": "Три товарища", + "author": "Эрих Мария Ремарк", + "location": "Санкт-Петербург, Кировский район", + "transferType": "give", + "gene": "art" + }, + { + "id": "13", + "title": "Краткие ответы на большие вопросы", + "author": "Стивен Хокинг", + "location": "Санкт-Петербург, Невский район", + "transferType": "exchange", + "gene": "scientific" + }, + { + "id": "14", + "title": "Интервальное голодание", + "author": "Джейсон Фанг", + "location": "Санкт-Петербург, Кировский район", + "transferType": "give", + "gene": "scientific" + } + ] +} diff --git a/src/pages/home/components/BookCard/components/BookCard.tsx b/src/pages/home/components/BookCard/components/BookCard.tsx new file mode 100644 index 0000000..2f0db08 --- /dev/null +++ b/src/pages/home/components/BookCard/components/BookCard.tsx @@ -0,0 +1,41 @@ +import styles from "../bookCard.module.scss"; +import { Card } from "antd"; +import img1 from "../img/Image1.png"; +import img2 from "../img/Image2.png"; + +interface Books { + id: string; + path?: string; + title: string; + author: string; + location: string; + transferType: string; + gene: string; +} + +export function BookCard({ books }: { books: Books[] }) { + return ( + <> + {books.map((book) => ( + + {book.title} + + } + hoverable + className={styles.card} + > +
+
+
{book.title}
+ {book.author} +
+

{book.location}

+
+ + ))} + + ); +} diff --git a/src/pages/home/components/BookCard/components/BookCardComponent.tsx b/src/pages/home/components/BookCard/components/BookCardComponent.tsx new file mode 100644 index 0000000..48863c9 --- /dev/null +++ b/src/pages/home/components/BookCard/components/BookCardComponent.tsx @@ -0,0 +1,13 @@ +import styles from "../bookCard.module.scss"; +import data from "../books.json"; +import { BookCard } from "./BookCard.tsx"; + +const books = data.data; + +export function BookCardComponent() { + return ( +
+ +
+ ); +} diff --git a/src/pages/home/components/BookCard/img/Image1.png b/src/pages/home/components/BookCard/img/Image1.png new file mode 100644 index 0000000..5cb1ca7 Binary files /dev/null and b/src/pages/home/components/BookCard/img/Image1.png differ diff --git a/src/pages/home/components/BookCard/img/Image2.png b/src/pages/home/components/BookCard/img/Image2.png new file mode 100644 index 0000000..70ddecf Binary files /dev/null and b/src/pages/home/components/BookCard/img/Image2.png differ diff --git a/src/pages/home/components/BookCard/index.ts b/src/pages/home/components/BookCard/index.ts index 20b7f01..7eb15fb 100644 --- a/src/pages/home/components/BookCard/index.ts +++ b/src/pages/home/components/BookCard/index.ts @@ -1 +1 @@ -export { BookCardComponent } from './BookCardComponent.tsx'; \ No newline at end of file +export { BookCardComponent } from "./components/BookCardComponent.tsx"; diff --git a/src/pages/home/components/Filter/FilterComponent.tsx b/src/pages/home/components/Filter/FilterComponent.tsx index d9d255c..ab02802 100644 --- a/src/pages/home/components/Filter/FilterComponent.tsx +++ b/src/pages/home/components/Filter/FilterComponent.tsx @@ -1,6 +1,6 @@ import styles from "./filter.module.scss"; -import {FilterGenre} from "./components/FilterGenre.tsx"; -import {FilterType} from "./components/FilterType.tsx"; +import { FilterGenre } from "./components/FilterGenre.tsx"; +import { FilterType } from "./components/FilterType.tsx"; export function FilterComponent() { return ( diff --git a/src/pages/home/components/Filter/components/FilterGenre.tsx b/src/pages/home/components/Filter/components/FilterGenre.tsx index 7ab970b..be8f2e7 100644 --- a/src/pages/home/components/Filter/components/FilterGenre.tsx +++ b/src/pages/home/components/Filter/components/FilterGenre.tsx @@ -1,4 +1,4 @@ -import { NavLink , useSearchParams} from "react-router"; +import { NavLink, useSearchParams } from "react-router"; import styles from "../filter.module.scss"; interface Genre { @@ -7,13 +7,13 @@ interface Genre { } const genres: Genre[] = [ - {title: "Все", url: "/"}, - {title: "От ShareBook", url: "/filter/FromShareBook"}, - {title: "Детективы", url: "/filter/Detectives"}, - {title: "Романы", url: "/filter/Novels"}, - {title: "Научные", url: "/filter/Scientific"}, - {title: "Исскуство", url: "/filter/Art"}, - {title: "Учебные", url: "/filter/Tutorials"}, + { title: "Все", url: "/" }, + { title: "От ShareBook", url: "/filter/FromShareBook" }, + { title: "Детективы", url: "/filter/Detectives" }, + { title: "Романы", url: "/filter/Novels" }, + { title: "Научные", url: "/filter/Scientific" }, + { title: "Исскуство", url: "/filter/Art" }, + { title: "Учебные", url: "/filter/Tutorials" }, ]; export function FilterGenre() { @@ -24,7 +24,7 @@ export function FilterGenre() { {genres.map((genre, idx) => ( isActive.isActive ? `${styles.buttonGenre} ${styles.buttonActive}` diff --git a/src/pages/home/components/Filter/components/FilterType.tsx b/src/pages/home/components/Filter/components/FilterType.tsx index bdf8421..9121230 100644 --- a/src/pages/home/components/Filter/components/FilterType.tsx +++ b/src/pages/home/components/Filter/components/FilterType.tsx @@ -1,8 +1,8 @@ -import {Dropdown} from "antd"; +import { Dropdown } from "antd"; import styles from "../filter.module.scss"; -import {useState} from "react"; -import {SvgArrow} from "../svg/SvgArrow.tsx"; -import {useSearchParams} from "react-router"; +import { useState } from "react"; +import { SvgArrow } from "../svg/SvgArrow.tsx"; +import { useSearchParams } from "react-router"; interface Type { label: string; @@ -39,7 +39,8 @@ export function FilterType() { onOpenChange={(vis) => setShowListState(vis)} > diff --git a/src/pages/home/components/Filter/filter.module.scss b/src/pages/home/components/Filter/filter.module.scss index f69df62..0cff908 100644 --- a/src/pages/home/components/Filter/filter.module.scss +++ b/src/pages/home/components/Filter/filter.module.scss @@ -1,73 +1,73 @@ .container { - display: flex; - justify-content: space-between; - margin-top: 20px; + display: flex; + justify-content: space-between; + margin-top: 20px; } .containerGenres { - display: flex; - font-family: 'Onest-Medium', sans-serif; - font-size: 15px; + display: flex; + font-family: "Onest-Medium", sans-serif; + font-size: 15px; } .buttonGenre { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; - height: 40px; - padding-left: 25px; - padding-right: 25px; - border-radius: 11px; + height: 40px; + padding-left: 25px; + padding-right: 25px; + border-radius: 11px; } .buttonDefault { - cursor: pointer; - background: unset; - color: var(--ant-color-text-placeholder); - transition: 0.2s all ease; + cursor: pointer; + background: unset; + color: var(--ant-color-text-placeholder); + transition: 0.2s all ease; - &:hover { - transition: 0.2s all ease; - color: var(--ant-color-text-base); - } + &:hover { + transition: 0.2s all ease; + color: var(--ant-color-text-base); + } } .buttonActive { - pointer-events: none; - background: var(--ant-color-primary); - color: #FFFFFF; + pointer-events: none; + background: var(--ant-color-primary); + color: #ffffff; } .buttonTypeFilter { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; - gap: 66px; - min-width: 159px; - padding: 0 21px 0; - height: 40px; - border-radius: 11px; + gap: 66px; + min-width: 159px; + padding: 0 21px 0; + height: 40px; + border-radius: 11px; - cursor: pointer; - border: none; - font-family: "Onest-Regular", sans-serif; - background: rgb(241, 244, 246, 80%); - color: var(--ant-color-primary); + cursor: pointer; + border: none; + font-family: "Onest-Regular", sans-serif; + background: rgba(241, 244, 246, 80%); + color: var(--ant-color-primary); } .svgDefault { - transition: .2s; + transition: 0.2s; } .svgActive { - rotate: 180deg; + rotate: 180deg; } .typeFilter { - backdrop-filter: blur(50px); - ul { - margin-top: 2px !important; - } -} \ No newline at end of file + backdrop-filter: blur(50px); + ul { + margin-top: 2px !important; + } +} diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss index 054d8f9..5bbfe42 100644 --- a/src/pages/home/home.module.scss +++ b/src/pages/home/home.module.scss @@ -1,5 +1,5 @@ .container { - max-width: 1400px; - padding: 0 35px 0; - margin: auto; -} \ No newline at end of file + max-width: 1330px; + padding: 0 35px 0; + margin: auto; +} diff --git a/tsconfig.app.json b/tsconfig.app.json index 15dbe4e..358ca9b 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -22,7 +22,5 @@ "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, - "include": [ - "src" - ] + "include": ["src"] } diff --git a/tsconfig.node.json b/tsconfig.node.json index 819e7e8..db0becc 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -20,7 +20,5 @@ "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, - "include": [ - "vite.config.ts" - ] + "include": ["vite.config.ts"] } diff --git a/vite.config.ts b/vite.config.ts index 2e5766d..081c8d9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,4 @@ -import {defineConfig} from "vite"; +import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({