Нужно создать папки: src/containers/Words/Word
, src/containers/Words/Word/Details
, src/containers/Words/Word/Option
.
В каждой из низ нужен index.js
файл для создания соответствующих компонентов.
Начнем с компонента Option
. Он должен возвращать элемент Text
.
Если свойство detailsKey
не равно examples
или defs
:
- стили элемента:
fontSize
-14
,color
-colors.black
,fontFamily
-RobotoRegular
,textDecorationLine
:underline
;
внутренний текст - свойствоoption
компонента;
в конце внутреннего теста,
, если свойствоlastOption
не равняетсяtrue
.
В другом случае логика отображения будет несколько другой.
Для этого в папке Option
создай файл helpers.js
и экспортируй из него функцию optionTransform
.
Эта функция принимает два аргумента: строк option
и word
. option
должна быть разбита на массив.
Разбиение должно быть таким образом, что бы каждое вхождение word
в option
было отдельным элементом.
После надо каждое вхождение word
в этом массиве обернуть элементом Text
с fontFamily
- RobotoBold
Если свойство detailsKey
равно examples
или defs
:
- стили элемента:
fontSize
-14
,color
-colors.black
,fontFamily
-RobotoRegular
; - внутренний текст - результат вызова
optionTransform
со свойствамиoption
иword
; - перед внутренним текстом нужно добавить
-
.
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.