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..9a2992e --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.module.scss @@ -0,0 +1,28 @@ +@import '@styles/colors'; +@import '@styles/mixins/font'; + +.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; +} + +.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..75b4d90 --- /dev/null +++ b/src/2_widgets/WordForms/WordFormsCard/WordFormsCard.tsx @@ -0,0 +1,28 @@ +/* eslint-disable prettier/prettier */ +import styles from './WordFormsCard.module.scss'; + +interface Props { + type?: string; +} + +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 и 'type' на данные с бэка */} + 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..59c2b3b --- /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 @@ + + + + + + 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;