From c2ce311218f45bb9c94e5341c69938b03c15cbbf Mon Sep 17 00:00:00 2001 From: Maria Gromyko Date: Sun, 19 Nov 2023 19:21:29 +0400 Subject: [PATCH 1/3] feat:added word form block --- src/1_pages/Word/Word.tsx | 2 ++ src/2_widgets/WordForms/WordForms.module.scss | 10 ++++++ src/2_widgets/WordForms/WordForms.tsx | 26 ++++++++++++++ .../WordFormsCard/WordFormsCard.module.scss | 36 +++++++++++++++++++ .../WordForms/WordFormsCard/WordFormsCard.tsx | 26 ++++++++++++++ .../WordForms/WordFormsCard/index.ts | 1 + .../WordFormsList/WordFormsList.module.scss | 7 ++++ .../WordForms/WordFormsList/WordFormsList.tsx | 14 ++++++++ .../WordForms/WordFormsList/index.ts | 1 + src/2_widgets/WordForms/index.ts | 1 + src/5_shared/assets/icons/icon_word_forms.svg | 6 ++++ 11 files changed, 130 insertions(+) create mode 100644 src/2_widgets/WordForms/WordForms.module.scss create mode 100644 src/2_widgets/WordForms/WordForms.tsx create mode 100644 src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss create mode 100644 src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx create mode 100644 src/2_widgets/WordForms/WordFormsCard/index.ts create mode 100644 src/2_widgets/WordForms/WordFormsList/WordFormsList.module.scss create mode 100644 src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx create mode 100644 src/2_widgets/WordForms/WordFormsList/index.ts create mode 100644 src/2_widgets/WordForms/index.ts create mode 100644 src/5_shared/assets/icons/icon_word_forms.svg diff --git a/src/1_pages/Word/Word.tsx b/src/1_pages/Word/Word.tsx index 602e1b7..5d9882d 100644 --- a/src/1_pages/Word/Word.tsx +++ b/src/1_pages/Word/Word.tsx @@ -4,6 +4,7 @@ import Associations from '@widgets/Associations'; import Synonyms from '@widgets/SynonymsAntonyms/Synonyms'; import Antonyms from '@widgets/SynonymsAntonyms/Antonyms'; import styles from './Word.module.scss'; +import WordForms from '@widgets/WordForms/WordForms'; const Word = () => { return ( @@ -11,6 +12,7 @@ const Word = () => { + diff --git a/src/2_widgets/WordForms/WordForms.module.scss b/src/2_widgets/WordForms/WordForms.module.scss new file mode 100644 index 0000000..d8a7396 --- /dev/null +++ b/src/2_widgets/WordForms/WordForms.module.scss @@ -0,0 +1,10 @@ +.container { + display: flex; + flex-direction: column; + gap: 20px; +} + +.header { + display: flex; + justify-content: space-between; +} diff --git a/src/2_widgets/WordForms/WordForms.tsx b/src/2_widgets/WordForms/WordForms.tsx new file mode 100644 index 0000000..16cefaa --- /dev/null +++ b/src/2_widgets/WordForms/WordForms.tsx @@ -0,0 +1,26 @@ +/* eslint-disable prettier/prettier */ +import { useTranslation } from 'react-i18next'; +import SvgWordForms from '@assets/icons/icon_word_forms.svg?react'; +import styles from './WordForms.module.scss'; +import { CustomLink, SectionTitle } from '@ui/index'; +import WordFormsList from './WordFormsList'; + + +export default function WordForms() { + const { t } = useTranslation('word-profile'); + return ( +
+
+ + + {t('forms')} + + + {t('allForms')} 3 + +
+ + +
+ ); +} diff --git a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss new file mode 100644 index 0000000..1e857b1 --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss @@ -0,0 +1,36 @@ +@import '@styles/colors'; +@import '@styles/mixins/font'; + +.container { + width: 240px; + height: 164px; + display: flex; + justify-content: center; +} + +.infinitiveContainer { + background-color: $neutral-background-main-color; +} + +.pastParticipleContainer { + background-color: #ffd4cc; +} + +.presentPerfectContainer { + background-color: #e0f5ff; +} + +.pastPerfectContainer { + background-color: #c1fbb4; +} + +.word { + @include font-source-sans(24px, $neutral-text-main-color, 500, 24px); + letter-spacing: 0.18px; + padding-bottom: 20px; +} + +.form { + text-transform: uppercase; + @include font-source-sans(12px, $neutral-text-main-color, 400, 12px); +} diff --git a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx new file mode 100644 index 0000000..b72540c --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx @@ -0,0 +1,26 @@ +/* eslint-disable prettier/prettier */ +import cx from 'classnames'; +import { CardContainer } from '@ui/index'; +import styles from './WordFormsCard.module.scss'; + +interface Props { + type?: 'infinitive' | 'past participle' | 'present perfect' | 'past perfect'; +} + +export default function WordFormsCard({ type = 'infinitive' }: Props) { + const cardClass = cx( + styles.container, + type === 'infinitive' && styles.infinitiveContainer, + type === 'past participle' && styles.pastParticipleContainer, + type === 'present perfect' && styles.presentPerfectContainer, + type === 'past perfect' && styles.pastPerfectContainer + ); + + return ( + + {/* TODO заменить Learn на данные с бэка */} + Learn + + + ) +} diff --git a/src/2_widgets/WordForms/WordFormsCard/index.ts b/src/2_widgets/WordForms/WordFormsCard/index.ts new file mode 100644 index 0000000..9a0896a --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsCard/index.ts @@ -0,0 +1 @@ +export { default } from './WordFormsCard'; diff --git a/src/2_widgets/WordForms/WordFormsList/WordFormsList.module.scss b/src/2_widgets/WordForms/WordFormsList/WordFormsList.module.scss new file mode 100644 index 0000000..9735768 --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsList/WordFormsList.module.scss @@ -0,0 +1,7 @@ +.list { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 40px; +} diff --git a/src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx b/src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx new file mode 100644 index 0000000..50850a8 --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx @@ -0,0 +1,14 @@ +/* eslint-disable prettier/prettier */ +import WordFormsCard from '../WordFormsCard'; +import styles from './WordFormsList.module.scss'; + +export default function WordFormsList() { + return ( +
+ + + + +
+ ); +} diff --git a/src/2_widgets/WordForms/WordFormsList/index.ts b/src/2_widgets/WordForms/WordFormsList/index.ts new file mode 100644 index 0000000..0eadd3b --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsList/index.ts @@ -0,0 +1 @@ +export { default } from './WordFormsList'; diff --git a/src/2_widgets/WordForms/index.ts b/src/2_widgets/WordForms/index.ts new file mode 100644 index 0000000..c75ebf5 --- /dev/null +++ b/src/2_widgets/WordForms/index.ts @@ -0,0 +1 @@ +export { default } from './WordForms'; diff --git a/src/5_shared/assets/icons/icon_word_forms.svg b/src/5_shared/assets/icons/icon_word_forms.svg new file mode 100644 index 0000000..74d5302 --- /dev/null +++ b/src/5_shared/assets/icons/icon_word_forms.svg @@ -0,0 +1,6 @@ + + + + + + From 03a6f65c39b6eef4d22fa48c8b524c6be70e7e29 Mon Sep 17 00:00:00 2001 From: Maria Gromyko Date: Sun, 19 Nov 2023 19:34:43 +0400 Subject: [PATCH 2/3] style: added new colors --- .../WordForms/WordFormsCard/WordFormsCard.module.scss | 6 +++--- src/5_shared/styles/colors.scss | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss index 1e857b1..4901c36 100644 --- a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss +++ b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss @@ -13,15 +13,15 @@ } .pastParticipleContainer { - background-color: #ffd4cc; + background-color: $danger-background-light-color; } .presentPerfectContainer { - background-color: #e0f5ff; + background-color: $secondary-background-very-light-color; } .pastPerfectContainer { - background-color: #c1fbb4; + background-color: $success-background-light-color; } .word { diff --git a/src/5_shared/styles/colors.scss b/src/5_shared/styles/colors.scss index 3e59fd0..e4b5651 100644 --- a/src/5_shared/styles/colors.scss +++ b/src/5_shared/styles/colors.scss @@ -6,6 +6,7 @@ $primary-button-dark-color: #5775dc; $secondary-button-color: #add3ff; $secondary-button-bright-color: #81bbff; +$secondary-background-very-light-color: #e0f5ff; $neutral-background-main-color: #ffffff; $neutral-background-second-color: #fafafa; @@ -18,5 +19,9 @@ $neutral-text-middle-color: #656a76; $neutral-text-dark-color: #595d68; $success-color: #70a872; +$success-background-light-color: #c1fbb4; + $danger-color: #ca2744; +$danger-background-light-color: #ffd4cc; + $warning-color: #ffaf05; From 6fae7ddf87a3b5d2742e185dbce7564a78fd06fa Mon Sep 17 00:00:00 2001 From: Maria Gromyko Date: Sun, 19 Nov 2023 21:07:05 +0400 Subject: [PATCH 3/3] fix: fixed props and random background --- .../WordFormsCard/WordFormsCard.module.scss | 24 +++++---------- .../WordForms/WordFormsCard/WordFormsCard.tsx | 30 ++++++++++--------- .../WordForms/WordFormsList/WordFormsList.tsx | 2 +- 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss index 4901c36..9a2992e 100644 --- a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss +++ b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss @@ -4,26 +4,18 @@ .container { width: 240px; height: 164px; + border-radius: 5px; + box-shadow: + 0px 0px 8px 0px rgba(17, 17, 26, 0.1), + 0px 1px 0px 0px rgba(17, 17, 26, 0.05); + padding: 14px 24px; + background-color: $neutral-background-main-color; display: flex; + flex-direction: column; + align-items: center; justify-content: center; } -.infinitiveContainer { - background-color: $neutral-background-main-color; -} - -.pastParticipleContainer { - background-color: $danger-background-light-color; -} - -.presentPerfectContainer { - background-color: $secondary-background-very-light-color; -} - -.pastPerfectContainer { - background-color: $success-background-light-color; -} - .word { @include font-source-sans(24px, $neutral-text-main-color, 500, 24px); letter-spacing: 0.18px; diff --git a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx index b72540c..75b4d90 100644 --- a/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx +++ b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx @@ -1,26 +1,28 @@ /* eslint-disable prettier/prettier */ -import cx from 'classnames'; -import { CardContainer } from '@ui/index'; import styles from './WordFormsCard.module.scss'; interface Props { - type?: 'infinitive' | 'past participle' | 'present perfect' | 'past perfect'; + type?: string; } -export default function WordFormsCard({ type = 'infinitive' }: Props) { - const cardClass = cx( - styles.container, - type === 'infinitive' && styles.infinitiveContainer, - type === 'past participle' && styles.pastParticipleContainer, - type === 'present perfect' && styles.presentPerfectContainer, - type === 'past perfect' && styles.pastPerfectContainer - ); +const getRandomColor = () => { + const colors = ['#FFFFFF', '#FFD4CC', '#E0F5FF', '#C1FBB4', '#D7E0FF', '#FFE89B', '#C2E8FF', '#FF8F87', '#97F48D']; + const randomIndex = Math.floor(Math.random() * colors.length); + return colors[randomIndex]; +}; + +export default function WordFormsCard({ type = "определите форму слова" }: Props) { + const randomColor = getRandomColor(); + + const containerStyle: React.CSSProperties = { + backgroundColor: randomColor, + }; return ( - - {/* TODO заменить Learn на данные с бэка */} +
+ {/* TODO заменить Learn и 'type' на данные с бэка */} Learn - +
) } diff --git a/src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx b/src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx index 50850a8..59c2b3b 100644 --- a/src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx +++ b/src/2_widgets/WordForms/WordFormsList/WordFormsList.tsx @@ -5,7 +5,7 @@ import styles from './WordFormsList.module.scss'; export default function WordFormsList() { return (
- +