From a1354b694434b118aaf7e3ca314b4a9caafd3193 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 12:14:11 +0200 Subject: [PATCH 01/27] feat: add definition widget for word page --- .../header/DefinitionHeader.module.scss | 5 ++++ .../Definitions/header/DefinitionHeader.tsx | 25 +++++++++++++++++++ src/2_widgets/Definitions/header/index.ts | 1 + src/2_widgets/Definitions/index.tsx | 19 ++++++++++++++ .../Definitions/item/DefinitionItem.tsx | 17 +++++++++++++ src/2_widgets/Definitions/item/index.ts | 1 + .../list/DefinitionsList.module.scss | 4 +++ .../Definitions/list/DefinitionsList.tsx | 17 +++++++++++++ src/2_widgets/Definitions/list/index.ts | 1 + src/5_shared/assets/icons/icon_definition.svg | 3 +++ 10 files changed, 93 insertions(+) create mode 100644 src/2_widgets/Definitions/header/DefinitionHeader.module.scss create mode 100644 src/2_widgets/Definitions/header/DefinitionHeader.tsx create mode 100644 src/2_widgets/Definitions/header/index.ts create mode 100644 src/2_widgets/Definitions/index.tsx create mode 100644 src/2_widgets/Definitions/item/DefinitionItem.tsx create mode 100644 src/2_widgets/Definitions/item/index.ts create mode 100644 src/2_widgets/Definitions/list/DefinitionsList.module.scss create mode 100644 src/2_widgets/Definitions/list/DefinitionsList.tsx create mode 100644 src/2_widgets/Definitions/list/index.ts create mode 100644 src/5_shared/assets/icons/icon_definition.svg diff --git a/src/2_widgets/Definitions/header/DefinitionHeader.module.scss b/src/2_widgets/Definitions/header/DefinitionHeader.module.scss new file mode 100644 index 0000000..b17e0c1 --- /dev/null +++ b/src/2_widgets/Definitions/header/DefinitionHeader.module.scss @@ -0,0 +1,5 @@ +.header { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} diff --git a/src/2_widgets/Definitions/header/DefinitionHeader.tsx b/src/2_widgets/Definitions/header/DefinitionHeader.tsx new file mode 100644 index 0000000..727a213 --- /dev/null +++ b/src/2_widgets/Definitions/header/DefinitionHeader.tsx @@ -0,0 +1,25 @@ +import { useTranslation } from 'react-i18next'; +import { CustomLink, SectionTitle } from '@shared/ui'; +import SvgIconDefinition from '@shared/assets/icons/icon_definition.svg?react'; +import styles from './DefinitionHeader.module.scss'; + +type TProps = { + total: string; +}; + +export const DefinitionHeader = ({ total }: TProps) => { + const { t } = useTranslation('word-profile'); + + return ( +
+ + + {t('definitions')} + + + {t('allDefinitions')}  + {total} + +
+ ); +}; diff --git a/src/2_widgets/Definitions/header/index.ts b/src/2_widgets/Definitions/header/index.ts new file mode 100644 index 0000000..ea63dd6 --- /dev/null +++ b/src/2_widgets/Definitions/header/index.ts @@ -0,0 +1 @@ +export { DefinitionHeader } from './DefinitionHeader'; diff --git a/src/2_widgets/Definitions/index.tsx b/src/2_widgets/Definitions/index.tsx new file mode 100644 index 0000000..9743d91 --- /dev/null +++ b/src/2_widgets/Definitions/index.tsx @@ -0,0 +1,19 @@ +import { TDefinition } from '@entities/word/model/types'; +import { DefinitionsList } from './list'; +import { DefinitionHeader } from './header'; + +type TProps = { + count: string; + items: TDefinition[]; +}; + +const Definitions = ({ count, items }: TProps) => { + return ( +
+ + +
+ ); +}; + +export default Definitions; diff --git a/src/2_widgets/Definitions/item/DefinitionItem.tsx b/src/2_widgets/Definitions/item/DefinitionItem.tsx new file mode 100644 index 0000000..6c9c463 --- /dev/null +++ b/src/2_widgets/Definitions/item/DefinitionItem.tsx @@ -0,0 +1,17 @@ +import { TDefinition } from '@/4_entities/word/model/types'; +import { CardContainer } from '@shared/ui'; + +type TProps = { + item: TDefinition; +}; + +export const DefinitionItem = ({ item }: TProps) => { + const { id, text, popularity } = item; + return ( + + {id} + {text} + {popularity} + + ); +}; diff --git a/src/2_widgets/Definitions/item/index.ts b/src/2_widgets/Definitions/item/index.ts new file mode 100644 index 0000000..e6ee568 --- /dev/null +++ b/src/2_widgets/Definitions/item/index.ts @@ -0,0 +1 @@ +export { DefinitionItem } from './DefinitionItem'; diff --git a/src/2_widgets/Definitions/list/DefinitionsList.module.scss b/src/2_widgets/Definitions/list/DefinitionsList.module.scss new file mode 100644 index 0000000..fb94c16 --- /dev/null +++ b/src/2_widgets/Definitions/list/DefinitionsList.module.scss @@ -0,0 +1,4 @@ +.list { + display: flex; + gap: calc(max(4%, 20px)); +} diff --git a/src/2_widgets/Definitions/list/DefinitionsList.tsx b/src/2_widgets/Definitions/list/DefinitionsList.tsx new file mode 100644 index 0000000..09cc0a7 --- /dev/null +++ b/src/2_widgets/Definitions/list/DefinitionsList.tsx @@ -0,0 +1,17 @@ +import { TDefinition } from '@/4_entities/word/model/types'; +import { DefinitionItem } from '../item'; +import styles from './DefinitionsList.module.scss'; + +type TProps = { + items: TDefinition[]; +}; + +export const DefinitionsList = ({ items }: TProps) => { + return ( +
+ {items.map((item) => ( + + ))} +
+ ); +}; diff --git a/src/2_widgets/Definitions/list/index.ts b/src/2_widgets/Definitions/list/index.ts new file mode 100644 index 0000000..cc05b01 --- /dev/null +++ b/src/2_widgets/Definitions/list/index.ts @@ -0,0 +1 @@ +export { DefinitionsList } from './DefinitionsList'; diff --git a/src/5_shared/assets/icons/icon_definition.svg b/src/5_shared/assets/icons/icon_definition.svg new file mode 100644 index 0000000..0207eed --- /dev/null +++ b/src/5_shared/assets/icons/icon_definition.svg @@ -0,0 +1,3 @@ + + + From 74710530b36c99e80098f2067327a9429c87a522 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 12:20:46 +0200 Subject: [PATCH 02/27] refactor: put wordStatus to feature --- .../getWordStatus}/ui/WordStatus/WordStatus.module.scss | 0 .../getWordStatus}/ui/WordStatus/WordStatus.tsx | 4 ++-- src/3_features/getWordStatus/ui/WordStatus/index.ts | 1 + src/3_features/getWordStatus/ui/index.ts | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) rename src/{5_shared => 3_features/getWordStatus}/ui/WordStatus/WordStatus.module.scss (100%) rename src/{5_shared => 3_features/getWordStatus}/ui/WordStatus/WordStatus.tsx (92%) create mode 100644 src/3_features/getWordStatus/ui/WordStatus/index.ts create mode 100644 src/3_features/getWordStatus/ui/index.ts diff --git a/src/5_shared/ui/WordStatus/WordStatus.module.scss b/src/3_features/getWordStatus/ui/WordStatus/WordStatus.module.scss similarity index 100% rename from src/5_shared/ui/WordStatus/WordStatus.module.scss rename to src/3_features/getWordStatus/ui/WordStatus/WordStatus.module.scss diff --git a/src/5_shared/ui/WordStatus/WordStatus.tsx b/src/3_features/getWordStatus/ui/WordStatus/WordStatus.tsx similarity index 92% rename from src/5_shared/ui/WordStatus/WordStatus.tsx rename to src/3_features/getWordStatus/ui/WordStatus/WordStatus.tsx index 09c55a2..ac81503 100644 --- a/src/5_shared/ui/WordStatus/WordStatus.tsx +++ b/src/3_features/getWordStatus/ui/WordStatus/WordStatus.tsx @@ -1,4 +1,4 @@ -import { Activity } from '@entities/words'; +import { TActivity } from '@entities/word/model/types'; import SvgStatusActive from '@shared/assets/icons/status_active.svg?react'; import SvgStatusNotActive from '@shared/assets/icons/icon_not_active.svg?react'; import SvgStatusCompleted from '@shared/assets/icons/icon_completed.svg?react'; @@ -6,7 +6,7 @@ import SvgIconQuestion from '@shared/assets/icons/icon_question.svg?react'; import styles from './WordStatus.module.scss'; type Props = { - activity?: Activity; + activity?: TActivity; colorTheme: 'dark' | 'light'; size?: 'mini' | 'big'; }; diff --git a/src/3_features/getWordStatus/ui/WordStatus/index.ts b/src/3_features/getWordStatus/ui/WordStatus/index.ts new file mode 100644 index 0000000..04cdc52 --- /dev/null +++ b/src/3_features/getWordStatus/ui/WordStatus/index.ts @@ -0,0 +1 @@ +export { WordStatus } from './WordStatus'; diff --git a/src/3_features/getWordStatus/ui/index.ts b/src/3_features/getWordStatus/ui/index.ts new file mode 100644 index 0000000..04cdc52 --- /dev/null +++ b/src/3_features/getWordStatus/ui/index.ts @@ -0,0 +1 @@ +export { WordStatus } from './WordStatus'; From 83d8f7cd77439220fc532677e56c84c6c07a856f Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 12:27:31 +0200 Subject: [PATCH 03/27] feat: add word entity --- src/4_entities/word/api/wordApi.tsx | 16 ++++++++ src/4_entities/word/api/wordMock.ts | 58 +++++++++++++++++++++++++++ src/4_entities/word/model/types.ts | 61 +++++++++++++++++++++++++++++ src/4_entities/words/index.ts | 2 +- 4 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 src/4_entities/word/api/wordApi.tsx create mode 100644 src/4_entities/word/api/wordMock.ts create mode 100644 src/4_entities/word/model/types.ts diff --git a/src/4_entities/word/api/wordApi.tsx b/src/4_entities/word/api/wordApi.tsx new file mode 100644 index 0000000..52b8853 --- /dev/null +++ b/src/4_entities/word/api/wordApi.tsx @@ -0,0 +1,16 @@ +import { IWord } from '../model/types'; +import { wordMock } from './wordMock'; + +export const wordApi = { + getWordById: async (id: string) => { + console.log('[wordApi]: wordId=', id); + + const response: Promise = new Promise((resolve) => { + setTimeout(() => { + resolve(wordMock); + }, 1); + }); + + return await response; + }, +}; diff --git a/src/4_entities/word/api/wordMock.ts b/src/4_entities/word/api/wordMock.ts new file mode 100644 index 0000000..ef123c2 --- /dev/null +++ b/src/4_entities/word/api/wordMock.ts @@ -0,0 +1,58 @@ +import { IWord } from '../model/types'; + +export const wordMock: IWord = { + id: 1, + slug: 'word1', + created: '2022-01-01', + modified: '2022-03-02', + translations_count: 1, + favorite: false, + types: [0, 1], + text: 'textWord1', + language: 'en', + activity: 'ACTIVE', + translations: [ + { + id: 243432, + text: 'textTranslation1', + }, + ], + examples_count: 0, + examples: [], + definitions: [ + { + id: 1245, + author: 'Mike', + text: 'Spring', + translation: 'Весна', + popularity: 'high', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + { + id: 224, + author: 'Jane', + text: 'To come to know by chance, or by study or other application', + translation: 'Весна', + popularity: 'low', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + { + id: 2247, + author: 'Iren', + text: 'To come to know by chance, or by study or other application', + translation: 'Весна', + popularity: 'low', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + ], + tags: [], + is_problematic: false, + synonyms: [], + antonyms: [], + forms: [], + similars: [], + notes: [], +}; diff --git a/src/4_entities/word/model/types.ts b/src/4_entities/word/model/types.ts new file mode 100644 index 0000000..56e2957 --- /dev/null +++ b/src/4_entities/word/model/types.ts @@ -0,0 +1,61 @@ +export type TTranslation = { + id: number; + text: string; +}; + +export interface ISynonym extends TTranslation {} + +export interface IAntonym extends TTranslation {} + +export interface IForm extends TTranslation {} + +export interface ISimilar extends TTranslation {} + +export type TExample = { + id: number; + text: string; + translation?: string; + created: string; + modified: string; +}; + +export type TDefinition = { + id: number; + text: string; + translation: string; + author?: string; + created: string; + modified: string; + popularity?: string; +}; + +export type TNote = { + text: string; +}; + +export type TActivity = 'INACTIVE' | 'ACTIVE' | 'MASTERED'; + +export interface IWord { + id: number; + slug: string; + language: string; + text: string; + translations: Array; + translations_count: number; + examples_count: number; + examples: Array; + definitions: Array; + types: Array; + tags: Array; + is_problematic: boolean; + activity: TActivity; + collections?: Array; + created: string; + modified: string; + synonyms: Array; + favorite: boolean; + antonyms: Array; + forms: Array; + similars: Array; + notes: Array; +} diff --git a/src/4_entities/words/index.ts b/src/4_entities/words/index.ts index 9cd8140..00236c9 100644 --- a/src/4_entities/words/index.ts +++ b/src/4_entities/words/index.ts @@ -1,2 +1,2 @@ -export type { Word, Activity, ActivityFilter } from './model/types'; +export type { Word, ActivityFilter, Activity } from './model/types'; export { wordsReducer, wordsSelector, getWords, setFilter } from './model/slice'; From 06901e9e839398074e59eef57d0a74d5b6d8f237 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 12:30:27 +0200 Subject: [PATCH 04/27] fix: import urls --- src/2_widgets/WordLayout/WordLayout.tsx | 3 ++- .../WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx | 6 +++--- .../filteringWords/lib/filteringWordsByActivity.ts | 2 +- src/5_shared/ui/index.ts | 1 - 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/2_widgets/WordLayout/WordLayout.tsx b/src/2_widgets/WordLayout/WordLayout.tsx index 548d6a7..4132791 100644 --- a/src/2_widgets/WordLayout/WordLayout.tsx +++ b/src/2_widgets/WordLayout/WordLayout.tsx @@ -1,9 +1,10 @@ import { Link } from 'react-router-dom'; import cx from 'classnames'; -import { WordSubMenu, WordStatus } from '@ui/index'; +import { WordSubMenu } from '@ui/index'; import { Word } from '../../4_entities/words'; import { Carousel, Badge, AddToFavorite, CopyText } from '../../5_shared/ui'; import styles from './WordLayout.module.scss'; +import { WordStatus } from '@features/getWordStatus/ui/WordStatus'; interface Props { item: Word; diff --git a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx index a28e1fc..9232cbe 100644 --- a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx +++ b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx @@ -1,5 +1,4 @@ import { - WordStatus, WordSubMenu, CardContainer, SectionTitle, @@ -7,11 +6,12 @@ import { AddToFavorite, ButtonIcon, } from '@ui/index'; -import styles from './WordOriginal.module.scss'; +import { IWord } from '../WordInfo'; +import { WordStatus } from '@features/getWordStatus/ui'; import SvgLang from '@assets/icons/wordProfile/language.svg?react'; import SvgComment from '@assets/icons/wordProfile/comment.svg?react'; import SvgShare from '@assets/icons/wordProfile/arrow.svg?react'; -import { IWord } from '../WordInfo'; +import styles from './WordOriginal.module.scss'; interface Props { info: IWord; diff --git a/src/3_features/filteringWords/lib/filteringWordsByActivity.ts b/src/3_features/filteringWords/lib/filteringWordsByActivity.ts index 3941660..c8fa4ac 100644 --- a/src/3_features/filteringWords/lib/filteringWordsByActivity.ts +++ b/src/3_features/filteringWords/lib/filteringWordsByActivity.ts @@ -1,4 +1,4 @@ -import { Word, Activity } from '../../../4_entities/words'; +import { Word, Activity } from '@entities/words/model/types'; export const filteringWordsByActivity = (words: Array, activity: Activity) => { return words.filter((word) => word.activity === activity); diff --git a/src/5_shared/ui/index.ts b/src/5_shared/ui/index.ts index 08b382e..f812bf4 100644 --- a/src/5_shared/ui/index.ts +++ b/src/5_shared/ui/index.ts @@ -8,7 +8,6 @@ export { Badge } from './Badge/Badge'; export { AddToFavorite } from './AddToFavorite/AddToFavorite'; export { CopyText } from './CopyText/CopyText'; export { SectionTitle } from './SectionTitle/SectionTitle'; -export { WordStatus } from './WordStatus/WordStatus'; export { WordSubMenu } from './WordSubMenu/WordSubMenu'; export { CardContainer } from './CardContainer/CardContainer'; export { Popularity } from './Popularity/Popularity'; From 6e46e3a1679f669655c43bb912106ed137ee759e Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 12:31:14 +0200 Subject: [PATCH 05/27] feat: add definitions to word page --- src/1_pages/Word/Word.tsx | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/1_pages/Word/Word.tsx b/src/1_pages/Word/Word.tsx index 602e1b7..84719c5 100644 --- a/src/1_pages/Word/Word.tsx +++ b/src/1_pages/Word/Word.tsx @@ -1,16 +1,37 @@ +import { useEffect, useState } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { IWord } from '@entities/word/model/types'; +import { wordApi } from '@entities/word/api/wordApi'; import WordInfo from '@widgets/WordMainInfo/WordInfo'; -import WordCollection from '@widgets/WordCollection'; -import Associations from '@widgets/Associations'; import Synonyms from '@widgets/SynonymsAntonyms/Synonyms'; import Antonyms from '@widgets/SynonymsAntonyms/Antonyms'; +import Definitions from '@widgets/Definitions'; +import Associations from '@widgets/Associations'; +import WordCollection from '@widgets/WordCollection'; import styles from './Word.module.scss'; const Word = () => { + const navigate = useNavigate(); + const { slugWord: wordId } = useParams(); + const [word, setWord] = useState(null); + + useEffect(() => { + if (!wordId) return navigate('/404'); + + wordApi + .getWordById(wordId) + .then((data: IWord) => + setWord((prevState) => (prevState ? { ...prevState, ...data } : data)) + ); + }, [navigate, wordId]); + return (
+ {word?.text} + {word?.definitions && }
From 7f1fbc11b4a9b8e22916f9c5ddc794d691b78524 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 18:19:20 +0200 Subject: [PATCH 06/27] feat: add translation --- public/locales/de/word-profile.json | 2 ++ public/locales/en/word-profile.json | 2 ++ public/locales/ru/word-profile.json | 2 ++ 3 files changed, 6 insertions(+) diff --git a/public/locales/de/word-profile.json b/public/locales/de/word-profile.json index 6751389..8756bc6 100644 --- a/public/locales/de/word-profile.json +++ b/public/locales/de/word-profile.json @@ -8,6 +8,8 @@ "allAssociations": "Alle Verbände", "definitions": "Definitionen", "allDefinitions": "Alle Definitionen", + "popularity": "Popularität", + "relatedExamples": "Verwandte Beispiele", "examples": "Beispiele", "allExamples": "Alle Beispiele", "forms": "Wortformen", diff --git a/public/locales/en/word-profile.json b/public/locales/en/word-profile.json index cf9b779..8c34a23 100644 --- a/public/locales/en/word-profile.json +++ b/public/locales/en/word-profile.json @@ -8,6 +8,8 @@ "allAssociations": "All associations", "definitions": "Definitions", "allDefinitions": "All definitions", + "relatedExamples": "Related examples", + "popularity": "Popularity", "examples": "Examples", "allExamples": "All examples", "forms": "Word forms", diff --git a/public/locales/ru/word-profile.json b/public/locales/ru/word-profile.json index b97e797..9973fd6 100644 --- a/public/locales/ru/word-profile.json +++ b/public/locales/ru/word-profile.json @@ -8,6 +8,8 @@ "allAssociations": "Все ассоциации", "definitions": "Определения", "allDefinitions": "Все определения", + "relatedExamples": "Связанные примеры", + "popularity": "Популярность", "examples": "Примеры", "allExamples": "Все примеры", "forms": "Формы слова", From 7efb8646a7f4d5c78860c35f5fad9153e15c39b3 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 18:20:41 +0200 Subject: [PATCH 07/27] refactor: add styles to definition card --- .../item/DefinitionItem.module.scss | 55 +++++++++++++++++++ .../Definitions/item/DefinitionItem.tsx | 29 +++++++--- src/4_entities/word/api/wordMock.ts | 2 +- src/5_shared/assets/icons/icon_related.svg | 3 + 4 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 src/2_widgets/Definitions/item/DefinitionItem.module.scss create mode 100644 src/5_shared/assets/icons/icon_related.svg diff --git a/src/2_widgets/Definitions/item/DefinitionItem.module.scss b/src/2_widgets/Definitions/item/DefinitionItem.module.scss new file mode 100644 index 0000000..6f3722c --- /dev/null +++ b/src/2_widgets/Definitions/item/DefinitionItem.module.scss @@ -0,0 +1,55 @@ +@import '@shared/styles/colors'; +@import '@shared/styles/mixins'; + +.container { + min-height: 324px; +} + +.top { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.link { + display: flex; + align-items: center; + gap: 8px; + @include font-source-sans(10px, $neutral-text-main-color, 400, 12px); + text-transform: uppercase; + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +.definition { + flex-grow: 1; + display: flex; + align-items: center; + @include font-source-sans(14px, $neutral-text-main-color, 500, 18px); + text-align: center; +} + +.popularity { + @include font-source-sans(10px, $neutral-text-main-color, 400, 12px); + text-transform: uppercase; + text-align: center; +} + +.high { + display: block; + color: $success-color; +} + +.medium { + display: block; + color: $warning-color; +} + +.low { + display: block; + color: $danger-color; +} diff --git a/src/2_widgets/Definitions/item/DefinitionItem.tsx b/src/2_widgets/Definitions/item/DefinitionItem.tsx index 6c9c463..3bee56f 100644 --- a/src/2_widgets/Definitions/item/DefinitionItem.tsx +++ b/src/2_widgets/Definitions/item/DefinitionItem.tsx @@ -1,17 +1,32 @@ -import { TDefinition } from '@/4_entities/word/model/types'; -import { CardContainer } from '@shared/ui'; +import { Link } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { CardContainer, WordSubMenu } from '@shared/ui'; +import { TDefinition } from '@entities/word/model/types'; +import SvgIconRelated from '@shared/assets/icons/icon_related.svg?react'; +import styles from './DefinitionItem.module.scss'; type TProps = { item: TDefinition; }; export const DefinitionItem = ({ item }: TProps) => { - const { id, text, popularity } = item; + const { text, popularity } = item; + const { t } = useTranslation('word-profile'); + return ( - - {id} - {text} - {popularity} + +
+ + + {t('relatedExamples')} + + +
+

{text}

+

+ {t('popularity')} + {popularity} +

); }; diff --git a/src/4_entities/word/api/wordMock.ts b/src/4_entities/word/api/wordMock.ts index ef123c2..01e1158 100644 --- a/src/4_entities/word/api/wordMock.ts +++ b/src/4_entities/word/api/wordMock.ts @@ -34,7 +34,7 @@ export const wordMock: IWord = { author: 'Jane', text: 'To come to know by chance, or by study or other application', translation: 'Весна', - popularity: 'low', + popularity: 'medium', created: '2023-11-13T09:03:15.483Z', modified: '2023-11-13T09:03:15.483Z', }, diff --git a/src/5_shared/assets/icons/icon_related.svg b/src/5_shared/assets/icons/icon_related.svg new file mode 100644 index 0000000..c736ac8 --- /dev/null +++ b/src/5_shared/assets/icons/icon_related.svg @@ -0,0 +1,3 @@ + + + From 521f94ccc4c1a84bd850caa5fefc31dde28e7182 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 18:25:54 +0200 Subject: [PATCH 08/27] refactor: move WordStatus to entities/word/ui --- src/2_widgets/WordLayout/WordLayout.tsx | 8 ++++---- .../WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx | 2 +- .../word}/ui/WordStatus/WordStatus.module.scss | 0 .../word}/ui/WordStatus/WordStatus.tsx | 0 .../word}/ui/WordStatus/index.ts | 0 .../getWordStatus => 4_entities/word}/ui/index.ts | 0 6 files changed, 5 insertions(+), 5 deletions(-) rename src/{3_features/getWordStatus => 4_entities/word}/ui/WordStatus/WordStatus.module.scss (100%) rename src/{3_features/getWordStatus => 4_entities/word}/ui/WordStatus/WordStatus.tsx (100%) rename src/{3_features/getWordStatus => 4_entities/word}/ui/WordStatus/index.ts (100%) rename src/{3_features/getWordStatus => 4_entities/word}/ui/index.ts (100%) diff --git a/src/2_widgets/WordLayout/WordLayout.tsx b/src/2_widgets/WordLayout/WordLayout.tsx index 4132791..1b337ae 100644 --- a/src/2_widgets/WordLayout/WordLayout.tsx +++ b/src/2_widgets/WordLayout/WordLayout.tsx @@ -1,10 +1,10 @@ -import { Link } from 'react-router-dom'; import cx from 'classnames'; +import { Link } from 'react-router-dom'; +import { Word } from '@entities/words'; +import { WordStatus } from '@entities/word/ui'; import { WordSubMenu } from '@ui/index'; -import { Word } from '../../4_entities/words'; -import { Carousel, Badge, AddToFavorite, CopyText } from '../../5_shared/ui'; +import { Carousel, Badge, AddToFavorite, CopyText } from '@shared/ui'; import styles from './WordLayout.module.scss'; -import { WordStatus } from '@features/getWordStatus/ui/WordStatus'; interface Props { item: Word; diff --git a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx index 9232cbe..13134ce 100644 --- a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx +++ b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx @@ -7,7 +7,7 @@ import { ButtonIcon, } from '@ui/index'; import { IWord } from '../WordInfo'; -import { WordStatus } from '@features/getWordStatus/ui'; +import { WordStatus } from '@/4_entities/word/ui'; import SvgLang from '@assets/icons/wordProfile/language.svg?react'; import SvgComment from '@assets/icons/wordProfile/comment.svg?react'; import SvgShare from '@assets/icons/wordProfile/arrow.svg?react'; diff --git a/src/3_features/getWordStatus/ui/WordStatus/WordStatus.module.scss b/src/4_entities/word/ui/WordStatus/WordStatus.module.scss similarity index 100% rename from src/3_features/getWordStatus/ui/WordStatus/WordStatus.module.scss rename to src/4_entities/word/ui/WordStatus/WordStatus.module.scss diff --git a/src/3_features/getWordStatus/ui/WordStatus/WordStatus.tsx b/src/4_entities/word/ui/WordStatus/WordStatus.tsx similarity index 100% rename from src/3_features/getWordStatus/ui/WordStatus/WordStatus.tsx rename to src/4_entities/word/ui/WordStatus/WordStatus.tsx diff --git a/src/3_features/getWordStatus/ui/WordStatus/index.ts b/src/4_entities/word/ui/WordStatus/index.ts similarity index 100% rename from src/3_features/getWordStatus/ui/WordStatus/index.ts rename to src/4_entities/word/ui/WordStatus/index.ts diff --git a/src/3_features/getWordStatus/ui/index.ts b/src/4_entities/word/ui/index.ts similarity index 100% rename from src/3_features/getWordStatus/ui/index.ts rename to src/4_entities/word/ui/index.ts From 90b1975935200bca2f0df5e79086deabd5fc9f73 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 18:26:51 +0200 Subject: [PATCH 09/27] fix: change color --- src/5_shared/styles/colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/5_shared/styles/colors.scss b/src/5_shared/styles/colors.scss index 3e59fd0..c9d3e8e 100644 --- a/src/5_shared/styles/colors.scss +++ b/src/5_shared/styles/colors.scss @@ -17,6 +17,6 @@ $neutral-text-light-color: #cdcdcd; $neutral-text-middle-color: #656a76; $neutral-text-dark-color: #595d68; -$success-color: #70a872; +$success-color: #2fbc48; $danger-color: #ca2744; $warning-color: #ffaf05; From b2f8ec0d52f549b30b461ccddade0fcbc9545739 Mon Sep 17 00:00:00 2001 From: azozulya Date: Tue, 14 Nov 2023 20:45:59 +0200 Subject: [PATCH 10/27] feat: create Definition page --- src/1_pages/Definitions/DefinitionsPage.module.scss | 0 src/1_pages/Definitions/DefinitionsPage.tsx | 9 +++++++++ 2 files changed, 9 insertions(+) create mode 100644 src/1_pages/Definitions/DefinitionsPage.module.scss create mode 100644 src/1_pages/Definitions/DefinitionsPage.tsx diff --git a/src/1_pages/Definitions/DefinitionsPage.module.scss b/src/1_pages/Definitions/DefinitionsPage.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/1_pages/Definitions/DefinitionsPage.tsx b/src/1_pages/Definitions/DefinitionsPage.tsx new file mode 100644 index 0000000..be17fb9 --- /dev/null +++ b/src/1_pages/Definitions/DefinitionsPage.tsx @@ -0,0 +1,9 @@ +import styles from './DefinitionsPage.module.scss'; + +export const DefinitionPage = () => { + return ( +
+

+
+ ); +}; From ce385395f3966f4ed57a4fc36682567d911547b0 Mon Sep 17 00:00:00 2001 From: azozulya Date: Wed, 15 Nov 2023 00:18:23 +0200 Subject: [PATCH 11/27] feat: add definition-page translation --- public/locales/de/definition-page.json | 4 ++++ public/locales/en/definition-page.json | 4 ++++ public/locales/ru/definition-page.json | 4 ++++ 3 files changed, 12 insertions(+) create mode 100644 public/locales/de/definition-page.json create mode 100644 public/locales/en/definition-page.json create mode 100644 public/locales/ru/definition-page.json diff --git a/public/locales/de/definition-page.json b/public/locales/de/definition-page.json new file mode 100644 index 0000000..791cb87 --- /dev/null +++ b/public/locales/de/definition-page.json @@ -0,0 +1,4 @@ +{ + "title": "Alle Definitionen", + "addDefinition": "Definition hinzufügen" +} diff --git a/public/locales/en/definition-page.json b/public/locales/en/definition-page.json new file mode 100644 index 0000000..09442da --- /dev/null +++ b/public/locales/en/definition-page.json @@ -0,0 +1,4 @@ +{ + "title": "All Definitions", + "addDefinition": "Add Definition" +} diff --git a/public/locales/ru/definition-page.json b/public/locales/ru/definition-page.json new file mode 100644 index 0000000..0144d64 --- /dev/null +++ b/public/locales/ru/definition-page.json @@ -0,0 +1,4 @@ +{ + "title": "Все определения", + "addDefinition": "Добавить определение" +} From 2057639aa802503f86e791e8f601c7e57790fea8 Mon Sep 17 00:00:00 2001 From: azozulya Date: Wed, 15 Nov 2023 00:21:46 +0200 Subject: [PATCH 12/27] feat: add EmptyCard widget, update definition page --- .../Definitions/DefinitionsPage.module.scss | 21 +++++++ src/1_pages/Definitions/DefinitionsPage.tsx | 43 +++++++++++++- src/1_pages/Definitions/index.ts | 1 + src/1_pages/index.tsx | 9 ++- src/2_widgets/EmptyCard/EmptyCard.module.scss | 13 +++++ src/2_widgets/EmptyCard/EmptyCard.tsx | 10 ++++ src/2_widgets/EmptyCard/index.ts | 1 + src/4_entities/word/api/definitionsMock.ts | 58 +++++++++++++++++++ src/4_entities/word/api/wordApi.tsx | 15 ++++- src/5_shared/lib/routes.ts | 1 + 10 files changed, 166 insertions(+), 6 deletions(-) create mode 100644 src/1_pages/Definitions/index.ts create mode 100644 src/2_widgets/EmptyCard/EmptyCard.module.scss create mode 100644 src/2_widgets/EmptyCard/EmptyCard.tsx create mode 100644 src/2_widgets/EmptyCard/index.ts create mode 100644 src/4_entities/word/api/definitionsMock.ts diff --git a/src/1_pages/Definitions/DefinitionsPage.module.scss b/src/1_pages/Definitions/DefinitionsPage.module.scss index e69de29..3bbc203 100644 --- a/src/1_pages/Definitions/DefinitionsPage.module.scss +++ b/src/1_pages/Definitions/DefinitionsPage.module.scss @@ -0,0 +1,21 @@ +@import '@styles/colors'; +@import '@styles/mixins/font'; + +.container { + padding-top: 37px; +} + +h1 { + @include font-source-sans(34px, $dark, 400); +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 25px; +} + +.word { + margin-bottom: 40px; +} diff --git a/src/1_pages/Definitions/DefinitionsPage.tsx b/src/1_pages/Definitions/DefinitionsPage.tsx index be17fb9..153b0dc 100644 --- a/src/1_pages/Definitions/DefinitionsPage.tsx +++ b/src/1_pages/Definitions/DefinitionsPage.tsx @@ -1,9 +1,48 @@ +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; +import { Button } from '@shared/ui'; +import { wordApi } from '@entities/word/api/wordApi'; +import { TDefinition } from '@entities/word/model/types'; +import { DefinitionsList } from '@widgets/Definitions'; +import { WordOriginal } from '@widgets/WordMainInfo/WordInfo'; import styles from './DefinitionsPage.module.scss'; +import { IWord } from '@widgets/WordMainInfo/WordInfo/WordInfo'; +import { EmptyCard } from '@/2_widgets/EmptyCard'; + +const info: IWord = { + word: 'Jump in at the deep end', + status: 'ACTIVE', + level: 'A1', + type: 'глагол', + favorite: true, +}; + +const DefinitionPage = () => { + const { t } = useTranslation('definition-page'); + const { slugWord: wordId } = useParams(); + const [definitions, setDefinitions] = useState([]); + + useEffect(() => { + if (!wordId) return; + wordApi + .getAllDefinitions(wordId) + .then((data: TDefinition[]) => + setDefinitions((prevState) => (prevState ? [...prevState, ...data] : data)) + ); + }, [wordId]); -export const DefinitionPage = () => { return (
-

+
+

{t('title')}

+ +
+ + {definitions?.length && } +
); }; + +export default DefinitionPage; diff --git a/src/1_pages/Definitions/index.ts b/src/1_pages/Definitions/index.ts new file mode 100644 index 0000000..ac27860 --- /dev/null +++ b/src/1_pages/Definitions/index.ts @@ -0,0 +1 @@ +export { default } from './DefinitionsPage'; diff --git a/src/1_pages/index.tsx b/src/1_pages/index.tsx index 8b2aa7e..997622e 100644 --- a/src/1_pages/index.tsx +++ b/src/1_pages/index.tsx @@ -1,8 +1,8 @@ import { lazy } from 'react'; import { Route, Routes } from 'react-router-dom'; -import MainLayout from '@widgets/MainLayout/MainLayout'; import { ABOUT_ROUTE, + ALL_DEFINITIONS, COLLECT_ROUTE, EXERCISES_ROUTE, FAVOR_ROUTE, @@ -10,11 +10,13 @@ import { MAIN_ROUTE, VOCAB_ROUTE, WORD_ROUTE, -} from '../5_shared/lib/routes'; +} from '@shared/lib/routes'; +import MainLayout from '@widgets/MainLayout/MainLayout'; const Vocabulary = lazy(() => import('@pages/Vocabulary')); const Word = lazy(() => import('@pages/Word')); -const NotFoundPage = lazy(() => import('@/1_pages/NotFoundPage/NotFoundPage')); +const NotFoundPage = lazy(() => import('@pages/NotFoundPage/NotFoundPage')); +const DefinitionsPage = lazy(() => import('@pages/Definitions')); export const Routing = () => { return ( @@ -28,6 +30,7 @@ export const Routing = () => { Languages} /> Exercises} /> } /> + } /> About} /> } /> diff --git a/src/2_widgets/EmptyCard/EmptyCard.module.scss b/src/2_widgets/EmptyCard/EmptyCard.module.scss new file mode 100644 index 0000000..141a653 --- /dev/null +++ b/src/2_widgets/EmptyCard/EmptyCard.module.scss @@ -0,0 +1,13 @@ +@import '@styles/mixins/font'; + +.container { + display: flex; + justify-content: center; + max-width: 322px; + min-height: 324px; + margin: 40px auto; + background-color: #c2c8d3; + + @include font-source-sans(14px, #737782, 500, 18); + text-align: center; +} diff --git a/src/2_widgets/EmptyCard/EmptyCard.tsx b/src/2_widgets/EmptyCard/EmptyCard.tsx new file mode 100644 index 0000000..2ff4c8b --- /dev/null +++ b/src/2_widgets/EmptyCard/EmptyCard.tsx @@ -0,0 +1,10 @@ +import { CardContainer } from '@/5_shared/ui'; +import styles from './EmptyCard.module.scss'; + +type TProps = { + message: string; +}; + +export const EmptyCard = ({ message }: TProps) => { + return {message}; +}; diff --git a/src/2_widgets/EmptyCard/index.ts b/src/2_widgets/EmptyCard/index.ts new file mode 100644 index 0000000..19258b3 --- /dev/null +++ b/src/2_widgets/EmptyCard/index.ts @@ -0,0 +1 @@ +export { EmptyCard } from './EmptyCard'; diff --git a/src/4_entities/word/api/definitionsMock.ts b/src/4_entities/word/api/definitionsMock.ts new file mode 100644 index 0000000..dcc86ac --- /dev/null +++ b/src/4_entities/word/api/definitionsMock.ts @@ -0,0 +1,58 @@ +import { TDefinition } from '../model/types'; + +export const definitionsMock: TDefinition[] = [ + { + id: 1245, + author: 'Mike', + text: 'Spring', + translation: 'Весна', + popularity: 'high', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + { + id: 224, + author: 'Jane', + text: 'To come to know by chance, or by study or other application', + translation: 'Весна', + popularity: 'medium', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + { + id: 2247, + author: 'Iren', + text: 'To come to know by chance, or by study or other application', + translation: 'Весна', + popularity: 'low', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + { + id: 12490, + author: 'Mike', + text: 'Spring', + translation: 'Весна', + popularity: 'high', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + { + id: 2244, + author: 'Jane', + text: 'To come to know by chance, or by study or other application', + translation: 'Весна', + popularity: 'medium', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, + { + id: 22472, + author: 'Nick', + text: 'To come to know by chance', + translation: 'Весна', + popularity: 'low', + created: '2023-11-13T09:03:15.483Z', + modified: '2023-11-13T09:03:15.483Z', + }, +]; diff --git a/src/4_entities/word/api/wordApi.tsx b/src/4_entities/word/api/wordApi.tsx index 52b8853..3e16e5f 100644 --- a/src/4_entities/word/api/wordApi.tsx +++ b/src/4_entities/word/api/wordApi.tsx @@ -1,5 +1,6 @@ -import { IWord } from '../model/types'; +import { IWord, TDefinition } from '../model/types'; import { wordMock } from './wordMock'; +import { definitionsMock } from './definitionsMock'; export const wordApi = { getWordById: async (id: string) => { @@ -13,4 +14,16 @@ export const wordApi = { return await response; }, + + getAllDefinitions: async (id: string) => { + console.log('[wordApi]: wordId=', id); + + const response: Promise = new Promise((resolve) => { + setTimeout(() => { + resolve(definitionsMock); + }, 1); + }); + + return await response; + }, }; diff --git a/src/5_shared/lib/routes.ts b/src/5_shared/lib/routes.ts index 6606e93..c8980ab 100644 --- a/src/5_shared/lib/routes.ts +++ b/src/5_shared/lib/routes.ts @@ -16,6 +16,7 @@ export const VOCAB_TROHIES_ROUTE = '/vocabulary/trophies'; export const VOCAB_WORD_ROUTE = '/vocabulary/word'; export const WORD_ROUTE = '/vocabulary/:slugWord'; +export const ALL_DEFINITIONS = '/definitions'; export const CONTACTS_ROUTE = '/contacts'; export const POLICY_ROUTE = '/privacy-policy'; From c36b0713bfc70110e67c6c5188dd0c6049258451 Mon Sep 17 00:00:00 2001 From: azozulya Date: Wed, 15 Nov 2023 00:25:31 +0200 Subject: [PATCH 13/27] refactor: definitions widget and list --- src/1_pages/Word/Word.tsx | 15 +++++++------- .../DefinitionsList.module.scss | 6 ++++++ .../DefinitionsList.tsx | 2 +- .../{list => DefinitionsList}/index.ts | 0 .../item/DefinitionItem.module.scss | 4 ++-- .../item/DefinitionItem.tsx | 0 .../{ => DefinitionsList}/item/index.ts | 0 .../DefinitionsWidget.module.scss | 0 .../DefinitionsWidget/DefinitionsWidget.tsx | 20 +++++++++++++++++++ .../header/DefinitionHeader.module.scss | 0 .../header/DefinitionHeader.tsx | 5 +++-- .../{ => DefinitionsWidget}/header/index.ts | 0 .../Definitions/DefinitionsWidget/index.ts | 1 + src/2_widgets/Definitions/index.ts | 3 +++ src/2_widgets/Definitions/index.tsx | 19 ------------------ .../list/DefinitionsList.module.scss | 4 ---- 16 files changed, 43 insertions(+), 36 deletions(-) create mode 100644 src/2_widgets/Definitions/DefinitionsList/DefinitionsList.module.scss rename src/2_widgets/Definitions/{list => DefinitionsList}/DefinitionsList.tsx (89%) rename src/2_widgets/Definitions/{list => DefinitionsList}/index.ts (100%) rename src/2_widgets/Definitions/{ => DefinitionsList}/item/DefinitionItem.module.scss (92%) rename src/2_widgets/Definitions/{ => DefinitionsList}/item/DefinitionItem.tsx (100%) rename src/2_widgets/Definitions/{ => DefinitionsList}/item/index.ts (100%) create mode 100644 src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.module.scss create mode 100644 src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx rename src/2_widgets/Definitions/{ => DefinitionsWidget}/header/DefinitionHeader.module.scss (100%) rename src/2_widgets/Definitions/{ => DefinitionsWidget}/header/DefinitionHeader.tsx (75%) rename src/2_widgets/Definitions/{ => DefinitionsWidget}/header/index.ts (100%) create mode 100644 src/2_widgets/Definitions/DefinitionsWidget/index.ts create mode 100644 src/2_widgets/Definitions/index.ts delete mode 100644 src/2_widgets/Definitions/index.tsx delete mode 100644 src/2_widgets/Definitions/list/DefinitionsList.module.scss diff --git a/src/1_pages/Word/Word.tsx b/src/1_pages/Word/Word.tsx index 84719c5..5a3cd85 100644 --- a/src/1_pages/Word/Word.tsx +++ b/src/1_pages/Word/Word.tsx @@ -1,37 +1,36 @@ import { useEffect, useState } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import { IWord } from '@entities/word/model/types'; import { wordApi } from '@entities/word/api/wordApi'; +import { DefinitionsWidget } from '@widgets/Definitions'; import WordInfo from '@widgets/WordMainInfo/WordInfo'; import Synonyms from '@widgets/SynonymsAntonyms/Synonyms'; import Antonyms from '@widgets/SynonymsAntonyms/Antonyms'; -import Definitions from '@widgets/Definitions'; import Associations from '@widgets/Associations'; import WordCollection from '@widgets/WordCollection'; import styles from './Word.module.scss'; const Word = () => { - const navigate = useNavigate(); const { slugWord: wordId } = useParams(); const [word, setWord] = useState(null); useEffect(() => { - if (!wordId) return navigate('/404'); - + if (!wordId) return; wordApi .getWordById(wordId) .then((data: IWord) => setWord((prevState) => (prevState ? { ...prevState, ...data } : data)) ); - }, [navigate, wordId]); + }, [wordId]); return (
- {word?.text} - {word?.definitions && } + {word?.definitions && wordId && ( + + )}
diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.module.scss b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.module.scss new file mode 100644 index 0000000..8ef2a40 --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.module.scss @@ -0,0 +1,6 @@ +.list { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: calc(max(6%, 20px)); + margin-bottom: 20px; +} diff --git a/src/2_widgets/Definitions/list/DefinitionsList.tsx b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx similarity index 89% rename from src/2_widgets/Definitions/list/DefinitionsList.tsx rename to src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx index 09cc0a7..f5785c8 100644 --- a/src/2_widgets/Definitions/list/DefinitionsList.tsx +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx @@ -1,5 +1,5 @@ import { TDefinition } from '@/4_entities/word/model/types'; -import { DefinitionItem } from '../item'; +import { DefinitionItem } from './item'; import styles from './DefinitionsList.module.scss'; type TProps = { diff --git a/src/2_widgets/Definitions/list/index.ts b/src/2_widgets/Definitions/DefinitionsList/index.ts similarity index 100% rename from src/2_widgets/Definitions/list/index.ts rename to src/2_widgets/Definitions/DefinitionsList/index.ts diff --git a/src/2_widgets/Definitions/item/DefinitionItem.module.scss b/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.module.scss similarity index 92% rename from src/2_widgets/Definitions/item/DefinitionItem.module.scss rename to src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.module.scss index 6f3722c..56d0433 100644 --- a/src/2_widgets/Definitions/item/DefinitionItem.module.scss +++ b/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.module.scss @@ -1,5 +1,5 @@ -@import '@shared/styles/colors'; -@import '@shared/styles/mixins'; +@import '@styles/colors'; +@import '@styles/mixins/font'; .container { min-height: 324px; diff --git a/src/2_widgets/Definitions/item/DefinitionItem.tsx b/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.tsx similarity index 100% rename from src/2_widgets/Definitions/item/DefinitionItem.tsx rename to src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.tsx diff --git a/src/2_widgets/Definitions/item/index.ts b/src/2_widgets/Definitions/DefinitionsList/item/index.ts similarity index 100% rename from src/2_widgets/Definitions/item/index.ts rename to src/2_widgets/Definitions/DefinitionsList/item/index.ts diff --git a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.module.scss b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx new file mode 100644 index 0000000..130e66d --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx @@ -0,0 +1,20 @@ +import { TDefinition } from '@entities/word/model/types'; +import { DefinitionsList } from '../DefinitionsList'; +import { DefinitionHeader } from './header'; +import { ALL_DEFINITIONS, VOCAB_ROUTE } from '@/5_shared/lib/routes'; + +type TProps = { + count: string; + items: TDefinition[]; + wordId: string; +}; + +export const DefinitionsWidget = ({ count, items, wordId }: TProps) => { + const link = `${VOCAB_ROUTE}/${wordId}${ALL_DEFINITIONS}`; + return ( +
+ + +
+ ); +}; diff --git a/src/2_widgets/Definitions/header/DefinitionHeader.module.scss b/src/2_widgets/Definitions/DefinitionsWidget/header/DefinitionHeader.module.scss similarity index 100% rename from src/2_widgets/Definitions/header/DefinitionHeader.module.scss rename to src/2_widgets/Definitions/DefinitionsWidget/header/DefinitionHeader.module.scss diff --git a/src/2_widgets/Definitions/header/DefinitionHeader.tsx b/src/2_widgets/Definitions/DefinitionsWidget/header/DefinitionHeader.tsx similarity index 75% rename from src/2_widgets/Definitions/header/DefinitionHeader.tsx rename to src/2_widgets/Definitions/DefinitionsWidget/header/DefinitionHeader.tsx index 727a213..8605f23 100644 --- a/src/2_widgets/Definitions/header/DefinitionHeader.tsx +++ b/src/2_widgets/Definitions/DefinitionsWidget/header/DefinitionHeader.tsx @@ -5,9 +5,10 @@ import styles from './DefinitionHeader.module.scss'; type TProps = { total: string; + linkToDefinitionsPage: string; }; -export const DefinitionHeader = ({ total }: TProps) => { +export const DefinitionHeader = ({ total, linkToDefinitionsPage }: TProps) => { const { t } = useTranslation('word-profile'); return ( @@ -16,7 +17,7 @@ export const DefinitionHeader = ({ total }: TProps) => { {t('definitions')} - + {t('allDefinitions')}  {total} diff --git a/src/2_widgets/Definitions/header/index.ts b/src/2_widgets/Definitions/DefinitionsWidget/header/index.ts similarity index 100% rename from src/2_widgets/Definitions/header/index.ts rename to src/2_widgets/Definitions/DefinitionsWidget/header/index.ts diff --git a/src/2_widgets/Definitions/DefinitionsWidget/index.ts b/src/2_widgets/Definitions/DefinitionsWidget/index.ts new file mode 100644 index 0000000..9e79a15 --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsWidget/index.ts @@ -0,0 +1 @@ +export { DefinitionsWidget } from './DefinitionsWidget'; diff --git a/src/2_widgets/Definitions/index.ts b/src/2_widgets/Definitions/index.ts new file mode 100644 index 0000000..63ea12e --- /dev/null +++ b/src/2_widgets/Definitions/index.ts @@ -0,0 +1,3 @@ +export { DefinitionsWidget } from './DefinitionsWidget'; + +export { DefinitionsList } from './DefinitionsList'; diff --git a/src/2_widgets/Definitions/index.tsx b/src/2_widgets/Definitions/index.tsx deleted file mode 100644 index 9743d91..0000000 --- a/src/2_widgets/Definitions/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { TDefinition } from '@entities/word/model/types'; -import { DefinitionsList } from './list'; -import { DefinitionHeader } from './header'; - -type TProps = { - count: string; - items: TDefinition[]; -}; - -const Definitions = ({ count, items }: TProps) => { - return ( -
- - -
- ); -}; - -export default Definitions; diff --git a/src/2_widgets/Definitions/list/DefinitionsList.module.scss b/src/2_widgets/Definitions/list/DefinitionsList.module.scss deleted file mode 100644 index fb94c16..0000000 --- a/src/2_widgets/Definitions/list/DefinitionsList.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.list { - display: flex; - gap: calc(max(4%, 20px)); -} From 3cc341d8d524c986572a202903f809c60cd3fc14 Mon Sep 17 00:00:00 2001 From: azozulya Date: Wed, 15 Nov 2023 00:27:33 +0200 Subject: [PATCH 14/27] refactor: WordInfo to reuse at definitions page --- src/2_widgets/WordMainInfo/WordInfo/WordInfo.tsx | 10 +++++----- .../WordInfo/WordOriginal/WordOriginal.tsx | 6 ++++-- .../WordMainInfo/WordInfo/WordOriginal/index.ts | 2 +- src/2_widgets/WordMainInfo/WordInfo/index.ts | 2 ++ 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/2_widgets/WordMainInfo/WordInfo/WordInfo.tsx b/src/2_widgets/WordMainInfo/WordInfo/WordInfo.tsx index dbcccac..7e866f7 100644 --- a/src/2_widgets/WordMainInfo/WordInfo/WordInfo.tsx +++ b/src/2_widgets/WordMainInfo/WordInfo/WordInfo.tsx @@ -1,20 +1,20 @@ +import { Activity } from '@entities/words'; +import { WordOriginal } from './WordOriginal'; +import { Badge, Carousel } from '@ui/index'; import WordInfoUser from '../WordInfo/WordInfoUser'; -import WordOriginal from './WordOriginal'; import WordTranslation from './WordTranslation'; -import { Badge, Carousel } from '@ui/index'; import image1 from '@assets/mock-for-card.png'; import image2 from '@assets/mock-for-card-2.png'; import styles from './WordInfo.module.scss'; -import { Activity } from '@entities/words'; export interface IWord { - img: Array; + img?: Array; word: string; status: Activity; level: string; type: string; favorite: boolean; - translate: Array; + translate?: Array; } const info: IWord = { diff --git a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx index e440192..cd9528e 100644 --- a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx +++ b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/WordOriginal.tsx @@ -1,3 +1,4 @@ +import cx from 'classnames'; import { IWord } from '../WordInfo'; import { WordStatus } from '@entities/word/ui'; import { AddToFavorite } from '@features/addToFavorite'; @@ -9,11 +10,12 @@ import styles from './WordOriginal.module.scss'; interface Props { info: IWord; + classname?: string; } -export default function WordOriginal({ info }: Props) { +export function WordOriginal({ info, classname }: Props) { return ( - +
diff --git a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/index.ts b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/index.ts index ca461dd..cdae9c1 100644 --- a/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/index.ts +++ b/src/2_widgets/WordMainInfo/WordInfo/WordOriginal/index.ts @@ -1 +1 @@ -export { default } from './WordOriginal'; +export { WordOriginal } from './WordOriginal'; diff --git a/src/2_widgets/WordMainInfo/WordInfo/index.ts b/src/2_widgets/WordMainInfo/WordInfo/index.ts index 42c6fa3..5dc7ffe 100644 --- a/src/2_widgets/WordMainInfo/WordInfo/index.ts +++ b/src/2_widgets/WordMainInfo/WordInfo/index.ts @@ -1 +1,3 @@ export { default } from './WordInfo'; + +export { WordOriginal } from './WordOriginal'; From 99519d6f7f682a0c5db8c06b9f6a9cab682a4a59 Mon Sep 17 00:00:00 2001 From: azozulya Date: Wed, 15 Nov 2023 00:28:57 +0200 Subject: [PATCH 15/27] fix: change btn default styles, add color --- src/0_app/App.tsx | 9 +++++---- src/2_widgets/WordsLayout/WordsLayout.module.scss | 2 -- src/5_shared/styles/colors.scss | 2 ++ src/5_shared/styles/mixins/btn.scss | 8 ++++---- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/0_app/App.tsx b/src/0_app/App.tsx index 0dc6950..11e937e 100644 --- a/src/0_app/App.tsx +++ b/src/0_app/App.tsx @@ -1,10 +1,10 @@ -/* eslint-disable react-refresh/only-export-components */ import { Theme } from '@radix-ui/themes'; import { ThemeProvider, withProviders } from './provider'; -import { Routing } from '../1_pages'; -import { themeSelector } from '../4_entities/theme'; -import { useAppSelector } from '../5_shared/model'; +import { Routing } from '@pages/index'; +import { themeSelector } from '@entities/theme'; +import { useAppSelector } from '@shared/model'; +// eslint-disable-next-line react-refresh/only-export-components function App() { const { theme } = useAppSelector(themeSelector); @@ -17,4 +17,5 @@ function App() { ); } +// eslint-disable-next-line react-refresh/only-export-components export default withProviders(); diff --git a/src/2_widgets/WordsLayout/WordsLayout.module.scss b/src/2_widgets/WordsLayout/WordsLayout.module.scss index bc2874e..72cb022 100644 --- a/src/2_widgets/WordsLayout/WordsLayout.module.scss +++ b/src/2_widgets/WordsLayout/WordsLayout.module.scss @@ -51,8 +51,6 @@ } .btn { - width: 185px; - padding: 22px 15px !important; @include media($max-width: 830px) { padding: 10px 15px; } diff --git a/src/5_shared/styles/colors.scss b/src/5_shared/styles/colors.scss index c9d3e8e..5266afa 100644 --- a/src/5_shared/styles/colors.scss +++ b/src/5_shared/styles/colors.scss @@ -20,3 +20,5 @@ $neutral-text-dark-color: #595d68; $success-color: #2fbc48; $danger-color: #ca2744; $warning-color: #ffaf05; + +$dark: #000000; diff --git a/src/5_shared/styles/mixins/btn.scss b/src/5_shared/styles/mixins/btn.scss index 6b7390e..988541a 100644 --- a/src/5_shared/styles/mixins/btn.scss +++ b/src/5_shared/styles/mixins/btn.scss @@ -60,8 +60,8 @@ } @mixin tall-btn { - max-width: 216px; - height: 60px; - padding: 22px 32px; - font-size: 12px; + padding: 16px 39px; + font-size: 20px; + line-height: 24px; + font-weight: 400; } From 2f411202de71e374c59866f758f646855fc8f45e Mon Sep 17 00:00:00 2001 From: azozulya Date: Thu, 16 Nov 2023 11:09:20 +0200 Subject: [PATCH 16/27] fix: add translation for popularity --- public/locales/de/popularity.json | 6 ++++++ public/locales/de/word-profile.json | 1 - public/locales/en/popularity.json | 6 ++++++ public/locales/en/word-profile.json | 1 - public/locales/ru/popularity.json | 6 ++++++ public/locales/ru/word-profile.json | 1 - 6 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 public/locales/de/popularity.json create mode 100644 public/locales/en/popularity.json create mode 100644 public/locales/ru/popularity.json diff --git a/public/locales/de/popularity.json b/public/locales/de/popularity.json new file mode 100644 index 0000000..b05b3ad --- /dev/null +++ b/public/locales/de/popularity.json @@ -0,0 +1,6 @@ +{ + "popularity": "Popularität", + "high": "hoch", + "medium": "durchschnitt", + "low": "niedrig" +} \ No newline at end of file diff --git a/public/locales/de/word-profile.json b/public/locales/de/word-profile.json index 8756bc6..989def9 100644 --- a/public/locales/de/word-profile.json +++ b/public/locales/de/word-profile.json @@ -8,7 +8,6 @@ "allAssociations": "Alle Verbände", "definitions": "Definitionen", "allDefinitions": "Alle Definitionen", - "popularity": "Popularität", "relatedExamples": "Verwandte Beispiele", "examples": "Beispiele", "allExamples": "Alle Beispiele", diff --git a/public/locales/en/popularity.json b/public/locales/en/popularity.json new file mode 100644 index 0000000..5d4a0b3 --- /dev/null +++ b/public/locales/en/popularity.json @@ -0,0 +1,6 @@ +{ + "popularity": "Popularity", + "high": "high", + "medium": "medium", + "low": "low" +} \ No newline at end of file diff --git a/public/locales/en/word-profile.json b/public/locales/en/word-profile.json index 8c34a23..6986eb1 100644 --- a/public/locales/en/word-profile.json +++ b/public/locales/en/word-profile.json @@ -9,7 +9,6 @@ "definitions": "Definitions", "allDefinitions": "All definitions", "relatedExamples": "Related examples", - "popularity": "Popularity", "examples": "Examples", "allExamples": "All examples", "forms": "Word forms", diff --git a/public/locales/ru/popularity.json b/public/locales/ru/popularity.json new file mode 100644 index 0000000..3f221e9 --- /dev/null +++ b/public/locales/ru/popularity.json @@ -0,0 +1,6 @@ +{ + "popularity": "Популярность", + "high": "высокая", + "medium": "средняя", + "low": "низкая" +} \ No newline at end of file diff --git a/public/locales/ru/word-profile.json b/public/locales/ru/word-profile.json index 9973fd6..9c717ea 100644 --- a/public/locales/ru/word-profile.json +++ b/public/locales/ru/word-profile.json @@ -9,7 +9,6 @@ "definitions": "Определения", "allDefinitions": "Все определения", "relatedExamples": "Связанные примеры", - "popularity": "Популярность", "examples": "Примеры", "allExamples": "Все примеры", "forms": "Формы слова", From 32c3fa6eb60dc404b1442679eca5e05edd6ae4cb Mon Sep 17 00:00:00 2001 From: azozulya Date: Thu, 16 Nov 2023 11:10:51 +0200 Subject: [PATCH 17/27] refactor: use Popularity UI in DefinitionWidget and page --- .../item/DefinitionItem.module.scss | 21 ------ .../DefinitionsList/item/DefinitionItem.tsx | 7 +- .../DefinitionsWidget/DefinitionsWidget.tsx | 2 +- .../SynonymAntonymCard/SynonymAntonymCard.tsx | 2 +- src/4_entities/word/model/types.ts | 4 +- .../ui/Popularity/Popularity.module.scss | 64 +++++++++++++------ src/5_shared/ui/Popularity/Popularity.tsx | 30 ++++----- 7 files changed, 63 insertions(+), 67 deletions(-) diff --git a/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.module.scss b/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.module.scss index 56d0433..bba5ce6 100644 --- a/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.module.scss +++ b/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.module.scss @@ -32,24 +32,3 @@ @include font-source-sans(14px, $neutral-text-main-color, 500, 18px); text-align: center; } - -.popularity { - @include font-source-sans(10px, $neutral-text-main-color, 400, 12px); - text-transform: uppercase; - text-align: center; -} - -.high { - display: block; - color: $success-color; -} - -.medium { - display: block; - color: $warning-color; -} - -.low { - display: block; - color: $danger-color; -} diff --git a/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.tsx b/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.tsx index 3bee56f..084dc8d 100644 --- a/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.tsx +++ b/src/2_widgets/Definitions/DefinitionsList/item/DefinitionItem.tsx @@ -1,6 +1,6 @@ import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { CardContainer, WordSubMenu } from '@shared/ui'; +import { CardContainer, Popularity, WordSubMenu } from '@shared/ui'; import { TDefinition } from '@entities/word/model/types'; import SvgIconRelated from '@shared/assets/icons/icon_related.svg?react'; import styles from './DefinitionItem.module.scss'; @@ -23,10 +23,7 @@ export const DefinitionItem = ({ item }: TProps) => {

{text}

-

- {t('popularity')} - {popularity} -

+ {popularity && } ); }; diff --git a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx index 130e66d..5514061 100644 --- a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx +++ b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.tsx @@ -1,7 +1,7 @@ import { TDefinition } from '@entities/word/model/types'; import { DefinitionsList } from '../DefinitionsList'; import { DefinitionHeader } from './header'; -import { ALL_DEFINITIONS, VOCAB_ROUTE } from '@/5_shared/lib/routes'; +import { ALL_DEFINITIONS, VOCAB_ROUTE } from '@shared/lib/routes'; type TProps = { count: string; diff --git a/src/2_widgets/SynonymsAntonyms/SynonymAntonymCard/SynonymAntonymCard.tsx b/src/2_widgets/SynonymsAntonyms/SynonymAntonymCard/SynonymAntonymCard.tsx index 71ed795..836481d 100644 --- a/src/2_widgets/SynonymsAntonyms/SynonymAntonymCard/SynonymAntonymCard.tsx +++ b/src/2_widgets/SynonymsAntonyms/SynonymAntonymCard/SynonymAntonymCard.tsx @@ -21,7 +21,7 @@ export default function SynonymAntonymCard({ type = 'synonym' }: Props) { Заметка для синонима - {type === 'synonym' && } + {type === 'synonym' && } ); } diff --git a/src/4_entities/word/model/types.ts b/src/4_entities/word/model/types.ts index 56e2957..166605d 100644 --- a/src/4_entities/word/model/types.ts +++ b/src/4_entities/word/model/types.ts @@ -1,3 +1,5 @@ +import { TPopularity } from '@shared/ui/Popularity/Popularity'; + export type TTranslation = { id: number; text: string; @@ -26,7 +28,7 @@ export type TDefinition = { author?: string; created: string; modified: string; - popularity?: string; + popularity?: TPopularity; }; export type TNote = { diff --git a/src/5_shared/ui/Popularity/Popularity.module.scss b/src/5_shared/ui/Popularity/Popularity.module.scss index da6e6d6..9865930 100644 --- a/src/5_shared/ui/Popularity/Popularity.module.scss +++ b/src/5_shared/ui/Popularity/Popularity.module.scss @@ -1,28 +1,50 @@ @import '@styles/colors'; +@import '@styles/mixins/font'; -.container { - margin: 0 auto; - display: flex; - flex-direction: column; - align-items: center; -} +// .container { +// margin: 0 auto; +// display: flex; +// flex-direction: column; +// align-items: center; +// } + +// .popularity { +// font-family: Inter; +// font-size: 10px; +// font-style: normal; +// font-weight: 400; +// text-transform: uppercase; + +// &_level { +// &_высокая { +// color: $success-color; +// } +// &_средняя { +// color: $warning-color; +// } +// &_низкая { +// color: $danger-color; +// } +// } +// } .popularity { - font-family: Inter; - font-size: 10px; - font-style: normal; - font-weight: 400; + @include font-source-sans(10px, $neutral-text-main-color, 400, 12px); text-transform: uppercase; + text-align: center; +} + +.high { + display: block; + color: $success-color; +} + +.medium { + display: block; + color: $warning-color; +} - &_level { - &_высокая { - color: $success-color; - } - &_средняя { - color: $warning-color; - } - &_низкая { - color: $danger-color; - } - } +.low { + display: block; + color: $danger-color; } diff --git a/src/5_shared/ui/Popularity/Popularity.tsx b/src/5_shared/ui/Popularity/Popularity.tsx index 2e0acef..c8fa600 100644 --- a/src/5_shared/ui/Popularity/Popularity.tsx +++ b/src/5_shared/ui/Popularity/Popularity.tsx @@ -1,23 +1,19 @@ -import cx from 'classnames'; +import { useTranslation } from 'react-i18next'; import styles from './Popularity.module.scss'; -interface Props { - popularity: 'высокая' | 'средняя' | 'низкая'; -} +export type TPopularity = 'high' | 'medium' | 'low'; + +type TProps = { + popularity: TPopularity; +}; + +export function Popularity({ popularity }: TProps) { + const { t } = useTranslation('popularity'); -export function Popularity({ popularity }: Props) { return ( -
- Популярность: - - {popularity} - -
+

+ {t('popularity')} + {t(popularity)} +

); } From 4b34a191e05c2c2ee72a4c38b717947f5a6399e2 Mon Sep 17 00:00:00 2001 From: azozulya Date: Thu, 16 Nov 2023 11:11:52 +0200 Subject: [PATCH 18/27] fix: prettier fixes for translation files --- public/locales/de/popularity.json | 2 +- public/locales/en/popularity.json | 2 +- public/locales/ru/popularity.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/locales/de/popularity.json b/public/locales/de/popularity.json index b05b3ad..9dfa331 100644 --- a/public/locales/de/popularity.json +++ b/public/locales/de/popularity.json @@ -3,4 +3,4 @@ "high": "hoch", "medium": "durchschnitt", "low": "niedrig" -} \ No newline at end of file +} diff --git a/public/locales/en/popularity.json b/public/locales/en/popularity.json index 5d4a0b3..7c165a5 100644 --- a/public/locales/en/popularity.json +++ b/public/locales/en/popularity.json @@ -3,4 +3,4 @@ "high": "high", "medium": "medium", "low": "low" -} \ No newline at end of file +} diff --git a/public/locales/ru/popularity.json b/public/locales/ru/popularity.json index 3f221e9..bcab69d 100644 --- a/public/locales/ru/popularity.json +++ b/public/locales/ru/popularity.json @@ -3,4 +3,4 @@ "high": "высокая", "medium": "средняя", "low": "низкая" -} \ No newline at end of file +} From a6a12c28da5d5012e68f01a2be765e81f16d1ca8 Mon Sep 17 00:00:00 2001 From: azozulya Date: Thu, 16 Nov 2023 11:57:55 +0200 Subject: [PATCH 19/27] fix: small styles fixies --- src/2_widgets/HeaderLayout/HeaderLayout.module.scss | 1 + src/2_widgets/MainLayout/MainLayout.module.scss | 9 +-------- src/2_widgets/MainLayout/MainLayout.tsx | 2 +- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/2_widgets/HeaderLayout/HeaderLayout.module.scss b/src/2_widgets/HeaderLayout/HeaderLayout.module.scss index ca549c7..472d4a8 100644 --- a/src/2_widgets/HeaderLayout/HeaderLayout.module.scss +++ b/src/2_widgets/HeaderLayout/HeaderLayout.module.scss @@ -41,6 +41,7 @@ header { span { @include font-source-sans(16px, $neutral-text-dark-color, 400, 19px, 'Fredoka'); + white-space: nowrap; } } diff --git a/src/2_widgets/MainLayout/MainLayout.module.scss b/src/2_widgets/MainLayout/MainLayout.module.scss index 8ca9bca..1c6640f 100644 --- a/src/2_widgets/MainLayout/MainLayout.module.scss +++ b/src/2_widgets/MainLayout/MainLayout.module.scss @@ -13,16 +13,9 @@ margin: 0 auto; padding: 0 215px; max-width: 1600px; - // @include media($min-width: 1750px) { - // max-width: 2190px; - // } - - // @include media($max-width: 1750px, $min-width: 1350px) { - // - // } @include media($max-width: 1350px, $min-width: 830px) { - padding: 0 115px; + padding: 0 30px 0 130px; } @include media($max-width: 830px) { diff --git a/src/2_widgets/MainLayout/MainLayout.tsx b/src/2_widgets/MainLayout/MainLayout.tsx index 2c0a7ae..6a46864 100644 --- a/src/2_widgets/MainLayout/MainLayout.tsx +++ b/src/2_widgets/MainLayout/MainLayout.tsx @@ -14,7 +14,7 @@ const MainLayout = () => {
-
+
From bcc010b1752562a22e7e236a7f8194bde73bb840 Mon Sep 17 00:00:00 2001 From: azozulya Date: Sun, 21 Jan 2024 16:03:46 +0200 Subject: [PATCH 20/27] refactor: change styles in ButtonIcon, CopyText, Popularity ui --- .../ui/ButtonIcon/ButtonIcon.module.scss | 13 ++++++-- src/5_shared/ui/ButtonIcon/ButtonIcon.tsx | 9 +++++- src/5_shared/ui/CopyText/CopyText.module.scss | 3 +- src/5_shared/ui/CopyText/CopyText.tsx | 4 +-- .../ui/Popularity/Popularity.module.scss | 32 +------------------ src/5_shared/ui/Popularity/Popularity.tsx | 3 +- .../ui/SectionTitle/SectionTitle.module.scss | 2 +- 7 files changed, 24 insertions(+), 42 deletions(-) diff --git a/src/5_shared/ui/ButtonIcon/ButtonIcon.module.scss b/src/5_shared/ui/ButtonIcon/ButtonIcon.module.scss index 5ce41d4..f21553e 100644 --- a/src/5_shared/ui/ButtonIcon/ButtonIcon.module.scss +++ b/src/5_shared/ui/ButtonIcon/ButtonIcon.module.scss @@ -1,4 +1,4 @@ -@import '/src/5_shared/styles/colors'; +@use '@styles/colors' as colors; .button { display: flex; @@ -10,11 +10,11 @@ transition: opacity 0.2s ease-in-out; &_light { - color: $neutral-background-second-color; + color: colors.$neutral-background-second-color; } &_dark { - color: $neutral-text-dark-color; + color: colors.$neutral-text-dark-color; } &:hover { @@ -22,3 +22,10 @@ cursor: pointer; } } + +.withBorder { + border: solid 1px colors.$neutral-line-color; + border-radius: 0.75rem; + width: 2rem; + height: 2rem; +} diff --git a/src/5_shared/ui/ButtonIcon/ButtonIcon.tsx b/src/5_shared/ui/ButtonIcon/ButtonIcon.tsx index 1a43b97..a5958e8 100644 --- a/src/5_shared/ui/ButtonIcon/ButtonIcon.tsx +++ b/src/5_shared/ui/ButtonIcon/ButtonIcon.tsx @@ -14,6 +14,7 @@ interface Props { disabled?: boolean; active?: boolean; onClick?: () => void; + withBorder?: boolean; } export const ButtonIcon = ({ @@ -25,6 +26,7 @@ export const ButtonIcon = ({ type = 'button', disabled = false, onClick, + withBorder = false, }: Props) => { return trigger === 'dropdown' ? ( ) : ( -
- + } + > + + + + {definitions?.length && } - ); }; diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss new file mode 100644 index 0000000..aecc1ae --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss @@ -0,0 +1,33 @@ +@use '@styles/colors'; +@import '@styles/mixins/font'; + +.item { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1.8rem; + margin-bottom: 0.8rem; + border-radius: 1.25rem; + background-color: $neutrals-200; + box-shadow: + 0px 0px 8px 0px rgba(17, 17, 26, 0.1), + 0px 1px 0px 0px rgba(17, 17, 26, 0.05); + padding: 1rem; +} + +.index { + @include font-source-sans(2rem, $neutral-text-middle-color, 500, 1.5); + margin: 0; +} + +.definition { + flex-grow: 1; + @include font-source-sans(1rem, $neutral-text-main-color, 400, 1.25); + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.copy { + margin: 0; +} diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx new file mode 100644 index 0000000..01eed54 --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx @@ -0,0 +1,25 @@ +import { CopyText, Popularity } from '@shared/ui'; +import { TDefinition } from '@entities/word/model/types'; +import styles from './DefinitionItem.module.scss'; + +type TProps = { + item: TDefinition; + index: number; +}; + +export const DefinitionItem = ({ item, index }: TProps) => { + const { text, popularity } = item; + + return ( +
  • +

    {index}

    +
    + {text} + {popularity && } +
    +

    + +

    +
    • + ); +}; diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/index.ts b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/index.ts new file mode 100644 index 0000000..e6ee568 --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/index.ts @@ -0,0 +1 @@ +export { DefinitionItem } from './DefinitionItem'; diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx index d91a6af..f42096c 100644 --- a/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx @@ -1,5 +1,5 @@ import { TDefinition } from '@/4_entities/word/model/types'; -import { DefinitionItem } from './item'; +import { DefinitionItem } from './DefinitionItem'; import styles from './DefinitionsList.module.scss'; type TProps = { diff --git a/src/2_widgets/EmptyCard/EmptyCard.module.scss b/src/2_widgets/EmptyCard/EmptyCard.module.scss index 141a653..096a662 100644 --- a/src/2_widgets/EmptyCard/EmptyCard.module.scss +++ b/src/2_widgets/EmptyCard/EmptyCard.module.scss @@ -1,13 +1,15 @@ -@import '@styles/mixins/font'; +@use '@styles/colors' as colors; +@use '@styles/mixins/font' as mixins; .container { display: flex; - justify-content: center; - max-width: 322px; - min-height: 324px; - margin: 40px auto; - background-color: #c2c8d3; + justify-content: space-between; + align-items: center; + @include mixins.font-source-sans(1.25rem, colors.$neutrals-900, 500, 1.5rem); +} - @include font-source-sans(14px, #737782, 500, 18); - text-align: center; +.message { + display: flex; + gap: 1rem; + margin: 0; } diff --git a/src/2_widgets/EmptyCard/EmptyCard.tsx b/src/2_widgets/EmptyCard/EmptyCard.tsx index 2ff4c8b..a6ea63b 100644 --- a/src/2_widgets/EmptyCard/EmptyCard.tsx +++ b/src/2_widgets/EmptyCard/EmptyCard.tsx @@ -1,10 +1,24 @@ -import { CardContainer } from '@/5_shared/ui'; +import { ReactElement } from 'react'; +import { Button, ShadowBlock, ShadowBlockContent } from '@shared/ui'; import styles from './EmptyCard.module.scss'; type TProps = { message: string; + btnTitle?: string; + icon?: ReactElement; }; -export const EmptyCard = ({ message }: TProps) => { - return {message}; +export const EmptyCard = ({ message, btnTitle, icon }: TProps) => { + return ( + + +
    +

    + {icon} {message} +

    + +
    +     +     + ); }; diff --git a/src/4_entities/word/api/definitionsMock.ts b/src/4_entities/word/api/definitionsMock.ts index dcc86ac..42202de 100644 --- a/src/4_entities/word/api/definitionsMock.ts +++ b/src/4_entities/word/api/definitionsMock.ts @@ -4,8 +4,9 @@ export const definitionsMock: TDefinition[] = [ { id: 1245, author: 'Mike', - text: 'Spring', - translation: 'Весна', + text: 'Gain or acquire knowledge of or skill in (something) by study, experience, or being taught.', + translation: + 'Приобретать знания или умения в (чем-либо) путем изучения, приобретения опыта или обучения.', popularity: 'high', created: '2023-11-13T09:03:15.483Z', modified: '2023-11-13T09:03:15.483Z', @@ -34,6 +35,9 @@ export const definitionsMock: TDefinition[] = [ text: 'Spring', translation: 'Весна', popularity: 'high', + examples: [ + "We learn from the record kept at the Freedmen's Bureau, that there are two thousand two hundred children here", + ], created: '2023-11-13T09:03:15.483Z', modified: '2023-11-13T09:03:15.483Z', }, @@ -49,9 +53,13 @@ export const definitionsMock: TDefinition[] = [ { id: 22472, author: 'Nick', - text: 'To come to know by chance', + text: 'Become aware of (something) by information or from observation.', translation: 'Весна', popularity: 'low', + examples: [ + "We learn from the record kept at the Freedmen's Bureau, that there are two thousand two hundred children here", + "If you want to be more than just ordinary, then at some point, you're going to have to learn to burn your boats", + ], created: '2023-11-13T09:03:15.483Z', modified: '2023-11-13T09:03:15.483Z', }, diff --git a/src/4_entities/word/api/wordMock.ts b/src/4_entities/word/api/wordMock.ts index 01e1158..aefd335 100644 --- a/src/4_entities/word/api/wordMock.ts +++ b/src/4_entities/word/api/wordMock.ts @@ -23,7 +23,7 @@ export const wordMock: IWord = { { id: 1245, author: 'Mike', - text: 'Spring', + text: 'Become aware of (something) by information or from observation.', translation: 'Весна', popularity: 'high', created: '2023-11-13T09:03:15.483Z', @@ -41,8 +41,9 @@ export const wordMock: IWord = { { id: 2247, author: 'Iren', - text: 'To come to know by chance, or by study or other application', - translation: 'Весна', + text: 'Gain or acquire knowledge of or skill in (something) by study, experience, or being taught.', + translation: + 'Приобретать знания или умения в (чем-либо) путем изучения, приобретения опыта или обучения.', popularity: 'low', created: '2023-11-13T09:03:15.483Z', modified: '2023-11-13T09:03:15.483Z', diff --git a/src/4_entities/word/model/types.ts b/src/4_entities/word/model/types.ts index 166605d..d1530f0 100644 --- a/src/4_entities/word/model/types.ts +++ b/src/4_entities/word/model/types.ts @@ -27,6 +27,7 @@ export type TDefinition = { translation: string; author?: string; created: string; + examples?: Array; modified: string; popularity?: TPopularity; }; diff --git a/src/4_entities/word/ui/WordPageStatus/WordPageStatus.module.scss b/src/4_entities/word/ui/WordPageStatus/WordPageStatus.module.scss new file mode 100644 index 0000000..0bd4cab --- /dev/null +++ b/src/4_entities/word/ui/WordPageStatus/WordPageStatus.module.scss @@ -0,0 +1,10 @@ +.header { + display: flex; + justify-content: space-between; + margin-bottom: 1rem; +} + +.actions { + display: flex; + gap: 0.625rem; +} diff --git a/src/4_entities/word/ui/WordPageStatus/WordPageStatus.tsx b/src/4_entities/word/ui/WordPageStatus/WordPageStatus.tsx new file mode 100644 index 0000000..a9470b9 --- /dev/null +++ b/src/4_entities/word/ui/WordPageStatus/WordPageStatus.tsx @@ -0,0 +1,20 @@ +import { ReactElement, ReactNode } from 'react'; +import { SectionTitle, ShadowBlock } from '@shared/ui'; +import styles from './WordPageStatus.module.scss'; + +type TWordPageStatus = { + title: string; + icon: ReactElement; + children: ReactNode | ReactNode[]; +}; + +export const WordPageStatus = ({ title, icon, children }: TWordPageStatus) => { + return ( + + + {icon} {title} + +
    {children}
    +     + ); +}; diff --git a/src/4_entities/word/ui/WordPageStatus/index.ts b/src/4_entities/word/ui/WordPageStatus/index.ts new file mode 100644 index 0000000..cd3f4a7 --- /dev/null +++ b/src/4_entities/word/ui/WordPageStatus/index.ts @@ -0,0 +1 @@ +export { WordPageStatus } from './WordPageStatus'; diff --git a/src/5_shared/styles/colors.scss b/src/5_shared/styles/colors.scss index 3fa77b7..4b0aeef 100644 --- a/src/5_shared/styles/colors.scss +++ b/src/5_shared/styles/colors.scss @@ -27,6 +27,15 @@ $warning-color: #ffaf05; $dark: #000000; +/********************************************/ + $primary-100: #e1eaff; +$primary-300: #b3c3fd; +$primary-400: #9eb4ff; +$primary-500: #6c8dff; + +$neutrals-100: #fafafa; +$neutrals-200: #fafafa; $neutrals-500: #cdcdcd; $neutrals-600: #737782; +$neutrals-900: #272932; diff --git a/src/5_shared/styles/mixins/btn.scss b/src/5_shared/styles/mixins/btn.scss index b4536b5..cfa734d 100644 --- a/src/5_shared/styles/mixins/btn.scss +++ b/src/5_shared/styles/mixins/btn.scss @@ -1,11 +1,10 @@ -@import '@styles/colors'; +@use '@styles/colors'; @import '@styles/mixins/font.scss'; @mixin btn { box-sizing: border-box; - border: none; - border-radius: 5px; - padding: 12px 32px; + border: solid 1px transparent; + border-radius: 0.625rem; transition: color 0.2s, @@ -24,17 +23,18 @@ @mixin primary-btn { @include btn; - background-color: $primary-button-color; - @include font-source-sans(12px, $neutral-text-main-color, 500); + color: colors.$neutrals-900; + background-color: colors.$primary-400; &:hover { - color: $neutral-text-contrast-color; + background-color: colors.$primary-300; } &:active, &_active, &[data-state='open'] { - background-color: $primary-button-active-color; + background-color: colors.$primary-500; + color: colors.$neutrals-100; } } diff --git a/src/5_shared/ui/Button/Button.module.scss b/src/5_shared/ui/Button/Button.module.scss index 8601429..d298188 100644 --- a/src/5_shared/ui/Button/Button.module.scss +++ b/src/5_shared/ui/Button/Button.module.scss @@ -1,9 +1,39 @@ +@use '@styles/colors' as colors; @import '@styles/mixins/btn'; .primary { @include primary-btn; } +///////////////// size ////////////////// + +.large { + @include font-source-sans(1.25rem, colors.$neutrals-900, 400, 1.5); + padding: 1.25rem 2rem; +} + +.normal { + padding: 1rem 2rem; + @include font-source-sans(1.25rem, colors.$neutrals-900, 400, 1.5); +} + +.medium { + padding: 0.875rem 2rem; + @include font-source-sans(1rem, colors.$neutrals-900, 400, 1.25); +} + +.small { + padding: 0.75rem 1.5rem; + @include font-source-sans(0.875rem, colors.$neutrals-900, 500, 1); +} + +.micro { + padding: 0.625rem 1.5rem; + @include font-source-sans(0.75rem, colors.$neutrals-900, 500, 0.875); +} + +/////////////////////////////////////////// + .transparent { @include transparent-btn; } diff --git a/src/5_shared/ui/Button/Button.tsx b/src/5_shared/ui/Button/Button.tsx index ecb2afb..f9e5ece 100644 --- a/src/5_shared/ui/Button/Button.tsx +++ b/src/5_shared/ui/Button/Button.tsx @@ -2,7 +2,7 @@ import cx from 'classnames'; import styles from './Button.module.scss'; type ButtonTheme = 'primary' | 'transparent' | 'secondary' | 'no-border'; -type ButtonSize = 'normal' | 'tall'; +type ButtonSize = 'large' | 'normal' | 'medium' | 'small' | 'micro' | 'tall'; interface Props { children: React.ReactNode; @@ -29,7 +29,7 @@ export const Button = ({ + + ); } @@ -41,7 +43,8 @@ const DefinitionPage = () => { icon={} > diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss index aecc1ae..3369463 100644 --- a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss @@ -1,18 +1,15 @@ @use '@styles/colors'; @import '@styles/mixins/font'; -.item { +.definition { + margin-bottom: 1.6rem; +} + +.inner { display: flex; justify-content: space-between; align-items: center; - gap: 1.8rem; - margin-bottom: 0.8rem; - border-radius: 1.25rem; - background-color: $neutrals-200; - box-shadow: - 0px 0px 8px 0px rgba(17, 17, 26, 0.1), - 0px 1px 0px 0px rgba(17, 17, 26, 0.05); - padding: 1rem; + gap: 2.1rem; } .index { @@ -20,12 +17,13 @@ margin: 0; } -.definition { +.content { flex-grow: 1; - @include font-source-sans(1rem, $neutral-text-main-color, 400, 1.25); display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.7rem; + margin: 0; + @include font-source-sans(1rem, $neutral-text-main-color, 400, 1.25); } .copy { diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx index 01eed54..441b4f3 100644 --- a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx @@ -1,4 +1,4 @@ -import { CopyText, Popularity } from '@shared/ui'; +import { CopyText, Popularity, ShadowBlock } from '@shared/ui'; import { TDefinition } from '@entities/word/model/types'; import styles from './DefinitionItem.module.scss'; @@ -11,15 +11,17 @@ export const DefinitionItem = ({ item, index }: TProps) => { const { text, popularity } = item; return ( -
  • -

    {index}

    -
    - {text} - {popularity && } -
    -

    - -

    +
  • + +

    {index}

    +

    + {text} + {popularity && } +

    +

    + +

    +
    • ); }; diff --git a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionItem/DefinitionItem.module.scss b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionItem/DefinitionItem.module.scss index 564f27e..2b835f3 100644 --- a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionItem/DefinitionItem.module.scss +++ b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionItem/DefinitionItem.module.scss @@ -19,7 +19,7 @@ @include font-source-sans(1rem, $neutral-text-main-color, 400, 1.25); display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.6rem; } .copy { diff --git a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.module.scss b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.module.scss index a234218..052d8a1 100644 --- a/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.module.scss +++ b/src/2_widgets/Definitions/DefinitionsWidget/DefinitionsWidget.module.scss @@ -1,7 +1,7 @@ .list { list-style: none; padding: 0; - margin: 0; + margin: 0 0 0.5rem; & li:last-child { margin-bottom: 0; diff --git a/src/2_widgets/EmptyCard/EmptyCard.module.scss b/src/2_widgets/EmptyCard/EmptyCard.module.scss deleted file mode 100644 index 096a662..0000000 --- a/src/2_widgets/EmptyCard/EmptyCard.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '@styles/colors' as colors; -@use '@styles/mixins/font' as mixins; - -.container { - display: flex; - justify-content: space-between; - align-items: center; - @include mixins.font-source-sans(1.25rem, colors.$neutrals-900, 500, 1.5rem); -} - -.message { - display: flex; - gap: 1rem; - margin: 0; -} diff --git a/src/2_widgets/EmptyCard/EmptyCard.tsx b/src/2_widgets/EmptyCard/EmptyCard.tsx deleted file mode 100644 index a6ea63b..0000000 --- a/src/2_widgets/EmptyCard/EmptyCard.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { ReactElement } from 'react'; -import { Button, ShadowBlock, ShadowBlockContent } from '@shared/ui'; -import styles from './EmptyCard.module.scss'; - -type TProps = { - message: string; - btnTitle?: string; - icon?: ReactElement; -}; - -export const EmptyCard = ({ message, btnTitle, icon }: TProps) => { - return ( - - -
    -

    - {icon} {message} -

    - -
    -     -     - ); -}; diff --git a/src/2_widgets/EmptyCard/index.ts b/src/2_widgets/EmptyCard/index.ts deleted file mode 100644 index 19258b3..0000000 --- a/src/2_widgets/EmptyCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { EmptyCard } from './EmptyCard'; diff --git a/src/4_entities/word/ui/WordPageStatus/WordPageStatus.module.scss b/src/4_entities/word/ui/WordPageStatus/WordPageStatus.module.scss index 0bd4cab..049d5c6 100644 --- a/src/4_entities/word/ui/WordPageStatus/WordPageStatus.module.scss +++ b/src/4_entities/word/ui/WordPageStatus/WordPageStatus.module.scss @@ -1,10 +1,11 @@ .header { display: flex; justify-content: space-between; - margin-bottom: 1rem; + margin-bottom: 2rem; + padding: 1.5rem 1.4rem; } .actions { display: flex; - gap: 0.625rem; + gap: 0.6rem; } diff --git a/src/5_shared/assets/icons/actions/plus.svg b/src/5_shared/assets/icons/actions/plus.svg index 24a8107..7743506 100644 --- a/src/5_shared/assets/icons/actions/plus.svg +++ b/src/5_shared/assets/icons/actions/plus.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/5_shared/styles/colors.scss b/src/5_shared/styles/colors.scss index 4b0aeef..4418b05 100644 --- a/src/5_shared/styles/colors.scss +++ b/src/5_shared/styles/colors.scss @@ -33,8 +33,9 @@ $primary-100: #e1eaff; $primary-300: #b3c3fd; $primary-400: #9eb4ff; $primary-500: #6c8dff; +$primary-900: #14227a; -$neutrals-100: #fafafa; +$neutrals-100: #ffffff; $neutrals-200: #fafafa; $neutrals-500: #cdcdcd; $neutrals-600: #737782; diff --git a/src/5_shared/styles/mixins/btn.scss b/src/5_shared/styles/mixins/btn.scss index cfa734d..40f2300 100644 --- a/src/5_shared/styles/mixins/btn.scss +++ b/src/5_shared/styles/mixins/btn.scss @@ -2,6 +2,8 @@ @import '@styles/mixins/font.scss'; @mixin btn { + display: flex; + gap: 0.34rem; box-sizing: border-box; border: solid 1px transparent; border-radius: 0.625rem; @@ -18,6 +20,11 @@ background-color: $neutral-background-second-color; color: $neutral-text-light-color; } + + svg { + width: 1em; + height: 1em; + } } @mixin primary-btn { @@ -31,11 +38,17 @@ } &:active, - &_active, + &:focus, &[data-state='open'] { background-color: colors.$primary-500; color: colors.$neutrals-100; } + + &:focus-visible { + outline: solid 2px colors.$primary-900; + background-color: colors.$primary-300; + color: colors.$neutrals-900; + } } @mixin transparent-btn { @@ -43,6 +56,20 @@ border: 1px solid $neutral-line-color; background-color: transparent; + + &:hover { + border-color: colors.$primary-300; + } + + &:active, + &:focus { + border-color: colors.$primary-500; + } + + &:focus-visible { + border-color: transparent; + outline: solid 2px colors.$primary-900; + } } @mixin secondary-btn { From 0be4011caf5b2856cb36e0c61e6344565da253da Mon Sep 17 00:00:00 2001 From: azozulya Date: Thu, 1 Feb 2024 10:46:56 +0200 Subject: [PATCH 27/27] feat: add related examples to definition page --- public/locales/de/definition-page.json | 3 +- public/locales/en/definition-page.json | 3 +- public/locales/ru/definition-page.json | 3 +- src/1_pages/Definitions/DefinitionsPage.tsx | 6 +--- .../DefinitionItem/DefinitionItem.module.scss | 13 ++++++- .../DefinitionItem/DefinitionItem.tsx | 36 +++++++++++++------ .../elements/Examples.module.scss | 34 ++++++++++++++++++ .../DefinitionItem/elements/Examples.tsx | 32 +++++++++++++++++ .../DefinitionsList/DefinitionsList.tsx | 2 +- src/4_entities/word/api/definitionsMock.ts | 5 +-- src/4_entities/word/api/wordMock.ts | 3 +- 11 files changed, 116 insertions(+), 24 deletions(-) create mode 100644 src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.module.scss create mode 100644 src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.tsx diff --git a/public/locales/de/definition-page.json b/public/locales/de/definition-page.json index 33948b6..98cdc51 100644 --- a/public/locales/de/definition-page.json +++ b/public/locales/de/definition-page.json @@ -1,5 +1,6 @@ { "title": "Alle Definitionen", "addDefinition": "Definition hinzufügen", - "emptyDefinitionMessage": "No definitions" + "emptyDefinitionMessage": "No definitions", + "relatedExamples": "Related examples" } diff --git a/public/locales/en/definition-page.json b/public/locales/en/definition-page.json index 4d53bc5..76b1a37 100644 --- a/public/locales/en/definition-page.json +++ b/public/locales/en/definition-page.json @@ -1,5 +1,6 @@ { "title": "All Definitions", "addDefinition": "Add Definition", - "emptyDefinitionMessage": "No definitions" + "emptyDefinitionMessage": "No definitions", + "relatedExamples": "Related examples" } diff --git a/public/locales/ru/definition-page.json b/public/locales/ru/definition-page.json index 65b1726..533a44b 100644 --- a/public/locales/ru/definition-page.json +++ b/public/locales/ru/definition-page.json @@ -4,5 +4,6 @@ "title_many": "{{count}} определений", "title_other": "{{count}} определения", "addDefinition": "Добавить определение", - "emptyDefinitionMessage": "Нет определений" + "emptyDefinitionMessage": "Нет определений", + "relatedExamples": "связанные примеры" } diff --git a/src/1_pages/Definitions/DefinitionsPage.tsx b/src/1_pages/Definitions/DefinitionsPage.tsx index d88adee..990b275 100644 --- a/src/1_pages/Definitions/DefinitionsPage.tsx +++ b/src/1_pages/Definitions/DefinitionsPage.tsx @@ -17,11 +17,7 @@ const DefinitionPage = () => { useEffect(() => { if (!wordId) return; - wordApi - .getAllDefinitions(wordId) - .then((data: TDefinition[]) => - setDefinitions((prevState) => (prevState ? [...prevState, ...data] : data)) - ); + wordApi.getAllDefinitions(wordId).then((data: TDefinition[]) => setDefinitions(data)); }, [wordId]); if (!definitions?.length) { diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss index 3369463..990e999 100644 --- a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.module.scss @@ -23,9 +23,20 @@ flex-direction: column; gap: 0.7rem; margin: 0; - @include font-source-sans(1rem, $neutral-text-main-color, 400, 1.25); + @include font-source-sans(1rem, $neutral-text-main-color, 500, 1.25); } .copy { margin: 0; } + +.translateTitle { + color: $neutrals-600; +} + +.translate { + flex-grow: 1; + font-size: 1rem; + font-weight: 400; + line-height: 1.25; +} diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx index 441b4f3..911ed2c 100644 --- a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/DefinitionItem.tsx @@ -1,5 +1,6 @@ -import { CopyText, Popularity, ShadowBlock } from '@shared/ui'; +import { Examples } from './elements/Examples'; import { TDefinition } from '@entities/word/model/types'; +import { CopyText, Popularity, ShadowBlock } from '@shared/ui'; import styles from './DefinitionItem.module.scss'; type TProps = { @@ -8,19 +9,32 @@ type TProps = { }; export const DefinitionItem = ({ item, index }: TProps) => { - const { text, popularity } = item; + const { text, popularity, translation, examples } = item; return (
  • - -

    {index}

    -

    - {text} - {popularity && } -

    -

    - -

    + +
    +

    {index}

    +

    + {text} + {popularity && } +

    +

    + +

    +
    + {translation && ( +
    +

    Перевод

    +

    {translation}

    +

    + +

    +
    + )} + + {examples && }
    • ); diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.module.scss b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.module.scss new file mode 100644 index 0000000..1e56a94 --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.module.scss @@ -0,0 +1,34 @@ +@import '@styles/mixins/font'; + +.list { + margin-top: 0.8rem; +} + +.item { + display: flex; + gap: 2rem; + align-items: center; + justify-content: space-between; + margin-bottom: 0.75rem; + font-size: 0.875rem; + line-height: 1; +} + +.marginTop { + margin-top: 1rem; +} + +.header { + display: flex; + align-items: center; + gap: 1rem; + margin: 0; +} + +.title { + display: flex; + align-items: center; + gap: 0.3rem; + @include font-source-sans(0.625rem, $neutrals-900, 400, 0.75); + text-transform: uppercase; +} diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.tsx b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.tsx new file mode 100644 index 0000000..6c9533e --- /dev/null +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionItem/elements/Examples.tsx @@ -0,0 +1,32 @@ +import { useTranslation } from 'react-i18next'; +import { CopyText, ShadowBlock } from '@shared/ui'; +import SVGIconLink from '@shared/assets/icons/actions/link.svg?react'; +import SVGIconArrow from '@shared/assets/icons/arrows/expand-filled.svg?react'; +import styles from './Examples.module.scss'; + +type TExamples = { + list: string[]; +}; + +export const Examples = ({ list }: TExamples) => { + const { t } = useTranslation('definition-page'); + + return ( + +

    + + + {t('relatedExamples')} + +

    +
      + {list.map((item) => ( +
    • + {item} + +
      • + ))} +
    +     + ); +}; diff --git a/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx index f42096c..f17607f 100644 --- a/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx +++ b/src/2_widgets/Definitions/DefinitionsList/DefinitionsList.tsx @@ -1,4 +1,4 @@ -import { TDefinition } from '@/4_entities/word/model/types'; +import { TDefinition } from '@entities/word/model/types'; import { DefinitionItem } from './DefinitionItem'; import styles from './DefinitionsList.module.scss'; diff --git a/src/4_entities/word/api/definitionsMock.ts b/src/4_entities/word/api/definitionsMock.ts index 42202de..34bb8d8 100644 --- a/src/4_entities/word/api/definitionsMock.ts +++ b/src/4_entities/word/api/definitionsMock.ts @@ -33,7 +33,7 @@ export const definitionsMock: TDefinition[] = [ id: 12490, author: 'Mike', text: 'Spring', - translation: 'Весна', + translation: '', popularity: 'high', examples: [ "We learn from the record kept at the Freedmen's Bureau, that there are two thousand two hundred children here", @@ -54,7 +54,8 @@ export const definitionsMock: TDefinition[] = [ id: 22472, author: 'Nick', text: 'Become aware of (something) by information or from observation.', - translation: 'Весна', + translation: + 'Приобретать знания или умения в (чем-либо) путем изучения, приобретения опыта или обучения.', popularity: 'low', examples: [ "We learn from the record kept at the Freedmen's Bureau, that there are two thousand two hundred children here", diff --git a/src/4_entities/word/api/wordMock.ts b/src/4_entities/word/api/wordMock.ts index aefd335..3bb9c2a 100644 --- a/src/4_entities/word/api/wordMock.ts +++ b/src/4_entities/word/api/wordMock.ts @@ -24,7 +24,8 @@ export const wordMock: IWord = { id: 1245, author: 'Mike', text: 'Become aware of (something) by information or from observation.', - translation: 'Весна', + translation: + 'Приобретать знания или умения в (чем-либо) путем изучения, приобретения опыта или обучения.', popularity: 'high', created: '2023-11-13T09:03:15.483Z', modified: '2023-11-13T09:03:15.483Z',