diff --git a/.loki/reference/chrome_iphone7_shared_Avatar_Primary.png b/.loki/reference/chrome_iphone7_shared_Avatar_Primary.png new file mode 100644 index 0000000..16c84ae Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Avatar_Primary.png differ diff --git a/.loki/reference/chrome_iphone7_shared_Avatar_Small.png b/.loki/reference/chrome_iphone7_shared_Avatar_Small.png new file mode 100644 index 0000000..6764254 Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Avatar_Small.png differ diff --git a/.loki/reference/chrome_iphone7_shared_Select_Primary.png b/.loki/reference/chrome_iphone7_shared_Select_Primary.png new file mode 100644 index 0000000..a9bef43 Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Select_Primary.png differ diff --git a/.loki/reference/chrome_laptop_shared_Avatar_Primary.png b/.loki/reference/chrome_laptop_shared_Avatar_Primary.png new file mode 100644 index 0000000..78b396e Binary files /dev/null and b/.loki/reference/chrome_laptop_shared_Avatar_Primary.png differ diff --git a/.loki/reference/chrome_laptop_shared_Avatar_Small.png b/.loki/reference/chrome_laptop_shared_Avatar_Small.png new file mode 100644 index 0000000..0912aad Binary files /dev/null and b/.loki/reference/chrome_laptop_shared_Avatar_Small.png differ diff --git a/.loki/reference/chrome_laptop_shared_Select_Primary.png b/.loki/reference/chrome_laptop_shared_Select_Primary.png new file mode 100644 index 0000000..ac504ed Binary files /dev/null and b/.loki/reference/chrome_laptop_shared_Select_Primary.png differ diff --git a/extractedTranslations/en/profile.json b/extractedTranslations/en/profile.json index e732850..15e6740 100644 --- a/extractedTranslations/en/profile.json +++ b/extractedTranslations/en/profile.json @@ -2,12 +2,16 @@ "cancel_button_text": "cancel_button_text", "edit_button_text": "", "profile_age_input_placeholder": "profile_age_input_placeholder", + "profile_avatar_img_alt": "profile_avatar_img_alt", + "profile_avatar_input_placeholder": "", "profile_card_error_text": "profile_card_error_text", "profile_card_error_title": "profile_card_error_title", "profile_city_input_placeholder": "profile_city_input_placeholder", + "profile_currency_select_label": "profile_currency_select_label", "profile_edit_button_text": "", "profile_firstname_input_placeholder": "profile_firstname_input_placeholder", "profile_lastname_input_placeholder": "profile_lastname_input_placeholder", "profile_title": "", + "profile_username_input_placeholder": "", "save_button_text": "save_button_text" } diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json index b64e007..6e9aa39 100644 --- a/extractedTranslations/en/translation.json +++ b/extractedTranslations/en/translation.json @@ -20,14 +20,18 @@ "page_error_message": "page_error_message", "page_reload_text": "page_reload_text", "profile_age_input_placeholder": "profile_age_input_placeholder", + "profile_avatar_img_alt": "profile_avatar_img_alt", + "profile_avatar_input_placeholder": "profile_avatar_input_placeholder", "profile_card_error_text": "profile_card_error_text", "profile_card_error_title": "profile_card_error_title", "profile_city_input_placeholder": "profile_city_input_placeholder", + "profile_currency_select_label": "profile_currency_select_label", "profile_edit_button_text": "profile_edit_button_text", "profile_firstname_input_placeholder": "profile_firstname_input_placeholder", "profile_lastname_input_placeholder": "profile_lastname_input_placeholder", "profile_navbar": "profile_navbar", "profile_title": "profile_title", + "profile_username_input_placeholder": "profile_username_input_placeholder", "save_button_text": "save_button_text", "throw_error": "throw_error", "username": "username", diff --git a/extractedTranslations/ru/translation.json b/extractedTranslations/ru/translation.json index b64e007..6e9aa39 100644 --- a/extractedTranslations/ru/translation.json +++ b/extractedTranslations/ru/translation.json @@ -20,14 +20,18 @@ "page_error_message": "page_error_message", "page_reload_text": "page_reload_text", "profile_age_input_placeholder": "profile_age_input_placeholder", + "profile_avatar_img_alt": "profile_avatar_img_alt", + "profile_avatar_input_placeholder": "profile_avatar_input_placeholder", "profile_card_error_text": "profile_card_error_text", "profile_card_error_title": "profile_card_error_title", "profile_city_input_placeholder": "profile_city_input_placeholder", + "profile_currency_select_label": "profile_currency_select_label", "profile_edit_button_text": "profile_edit_button_text", "profile_firstname_input_placeholder": "profile_firstname_input_placeholder", "profile_lastname_input_placeholder": "profile_lastname_input_placeholder", "profile_navbar": "profile_navbar", "profile_title": "profile_title", + "profile_username_input_placeholder": "profile_username_input_placeholder", "save_button_text": "save_button_text", "throw_error": "throw_error", "username": "username", diff --git a/json-server/db.json b/json-server/db.json index f920929..35f94be 100644 --- a/json-server/db.json +++ b/json-server/db.json @@ -43,6 +43,6 @@ "country": "Russia", "city": "Екатеринбург", "username": "kandaysbln", - "avatar": "https://avataaars.io/?avatarStyle=Circle&topType=LongHairNotTooLong&accessoriesType=Blank&hairColor=BrownDark&facialHairType=BeardMedium&facialHairColor=BrownDark&clotheType=CollarSweater&clotheColor=PastelBlue&eyeType=Surprised&eyebrowType=Default&mouthType=Smile&skinColor=Light" + "avatar": "https://www.w3schools.com/howto/img_avatar.png" } -} \ No newline at end of file +} diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json index 16df99b..56253dc 100644 --- a/public/locales/en/profile.json +++ b/public/locales/en/profile.json @@ -5,5 +5,9 @@ "profile_card_error_title": "There was an error loading your profile", "profile_card_error_text": "Try refreshing your profile page", "profile_age_input_placeholder": "Your age", - "profile_city_input_placeholder": "Your city" + "profile_city_input_placeholder": "Your city", + "profile_avatar_input_placeholder": "Your avatar", + "profile_username_input_placeholder": "Your username", + "profile_avatar_img_alt": "Your avatar", + "profile_currency_select_label": "Your currency" } diff --git a/public/locales/ru/profile.json b/public/locales/ru/profile.json index d237561..b9fb2c0 100644 --- a/public/locales/ru/profile.json +++ b/public/locales/ru/profile.json @@ -5,5 +5,9 @@ "profile_card_error_title": "Произошла ошибка при загрузке профиля", "profile_card_error_text": "Попробуйте обновить страницу", "profile_age_input_placeholder": "Ваш возраст", - "profile_city_input_placeholder": "Ваш город" + "profile_city_input_placeholder": "Ваш город", + "profile_avatar_input_placeholder": "Ваш аватар", + "profile_username_input_placeholder": "Ваше имя пользователя", + "profile_avatar_img_alt": "Ваша аватарка", + "profile_currency_select_label": "Ваша валюта" } diff --git a/src/entities/Profile/ui/ProfileCard/ProfileCard.module.scss b/src/entities/Profile/ui/ProfileCard/ProfileCard.module.scss index c0f2ac4..bf7231b 100644 --- a/src/entities/Profile/ui/ProfileCard/ProfileCard.module.scss +++ b/src/entities/Profile/ui/ProfileCard/ProfileCard.module.scss @@ -22,3 +22,13 @@ justify-content: center; height: 300px; } + +.avatar-wrapper { + width: 100%; + display: flex; + justify-content: center; +} + +.editing { + border: 2px solid var(--inverted-primary-color); +} diff --git a/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx b/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx index ac910f1..fc96b43 100644 --- a/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx +++ b/src/entities/Profile/ui/ProfileCard/ProfileCard.tsx @@ -1,11 +1,14 @@ import React, { memo } from 'react'; -import { classNames } from 'shared/lib/classNames/classNames'; +import { classNames, Mods } from 'shared/lib/classNames/classNames'; import classes from './ProfileCard.module.scss'; import { useTranslation } from 'react-i18next'; import { Text } from 'shared/ui/Text/Text'; import { Input } from 'shared/ui/Input/Input'; import { IProfile } from '../../model/types/profile'; import { Loader } from 'shared/ui/Loader/Loader'; +import { Avatar } from 'shared/ui/Avatar/Avatar'; +import { Select } from 'shared/ui/Select/Select'; +import { Currency } from 'shared/const/common'; interface IProfileCardProps { className?: string; @@ -17,6 +20,8 @@ interface IProfileCardProps { onChangeLastName?: (value: string) => void onChangeAge?: (value: string) => void onChangeCity?: (value: string) => void + onChangeUsername?: (value: string) => void + onChangeAvatar?: (value: string) => void } const ProfileCardComponent: React.FC = (props) => { @@ -29,11 +34,17 @@ const ProfileCardComponent: React.FC = (props) => { onChangeLastName, onChangeFirstName, onChangeAge, - onChangeCity + onChangeCity, + onChangeAvatar, + onChangeUsername, } = props; const { t } = useTranslation( 'profile' ); + const mods: Mods = { + [classes.editing]: !readonly, + }; + if (isLoading) { return (
@@ -56,8 +67,13 @@ const ProfileCardComponent: React.FC = (props) => { } return ( -
+
+ { data?.avatar && ( +
+ +
+ ) } = (props) => { className={ classes.input } onChange={ onChangeCity } /> + + + + ; + +export const Primary = Template.bind({}); +Primary.args = { + label: 'Укажите значение', + options: [ + { + value: '1', + text: 'Первый пункт', + }, + { + value: '2', + text: 'Второй пункт', + }, + { + value: '3', + text: 'Третий пункт', + } + ] +}; diff --git a/src/shared/ui/Select/Select.tsx b/src/shared/ui/Select/Select.tsx new file mode 100644 index 0000000..30692a1 --- /dev/null +++ b/src/shared/ui/Select/Select.tsx @@ -0,0 +1,63 @@ +import React, { ChangeEvent, memo, useMemo } from 'react'; +import { classNames, Mods } from 'shared/lib/classNames/classNames'; +import classes from './Select.module.scss'; + +interface ISelectOption { + value: string; + text: string; +} + +interface ISelectProps { + className?: string; + label?: string; + options?: ISelectOption[]; + value?: string; + onChange?: (value: string) => void +} + +const SelectComponent: React.FC = (props) => { + const { + className, + label, + options, + value, + onChange, + } = props; + + const mods: Mods = {}; + + const optionsList = useMemo( () => { + return options?.map( (item) => ( + + ) ); + }, [ options ] ); + + const onChangeHandler = (e: ChangeEvent) => { + onChange?.( e.target.value ); + }; + + return ( +
+ { label && ( + + { label } + + ) } + +
+ ); +}; + +export const Select = memo( SelectComponent );