From 908031c8d3b98089acf9a7c3f12264e42e6b1e44 Mon Sep 17 00:00:00 2001 From: Rachel Shtern Date: Fri, 29 May 2026 19:04:14 +0300 Subject: [PATCH 1/3] feat: RecomendationTraining component --- src/components/UI/Video/SGLVideoCard.tsx | 2 +- src/locales/ar/translation.json | 8 +- src/locales/en/translation.json | 8 +- src/locales/he/translation.json | 8 +- src/locales/ru/translation.json | 8 +- src/pages/lifeStyle/LifeStyle.tsx | 7 +- .../RecomendationTraining.tsx | 74 +++++++++++++++++++ .../recomendationTraining/style.ts | 27 +++++++ 8 files changed, 132 insertions(+), 10 deletions(-) create mode 100644 src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx create mode 100644 src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts diff --git a/src/components/UI/Video/SGLVideoCard.tsx b/src/components/UI/Video/SGLVideoCard.tsx index 82bf9c8..c1be629 100644 --- a/src/components/UI/Video/SGLVideoCard.tsx +++ b/src/components/UI/Video/SGLVideoCard.tsx @@ -25,7 +25,7 @@ export const SGLVideoCard = ({ const theme = useTheme() return ( - +
{title} {description} diff --git a/src/locales/ar/translation.json b/src/locales/ar/translation.json index 5366858..4272cf5 100644 --- a/src/locales/ar/translation.json +++ b/src/locales/ar/translation.json @@ -78,5 +78,11 @@ "balanceTraining.title": "مصمم لتحسين التوازن", "balanceTraining.description": "سلسلة تمارين لتحسين الاستقرار ومنع السقوط، مصممة خصيصًا لاحتياجاتك.", "balanceTraining.button": "شاهد مقاطع تدريب التوازن", - "dailyReport.title": "مؤشراتي (PROMs)" + "dailyReport.title": "مؤشراتي (PROMs)", + "lifeStyle.todayRecommendations": "توصيات اليوم", + "lifeStyle.balanceExercises": "تمارين التوازن", + "lifeStyle.morningStretchingTitle": "تمارين التمدد الصباحية", + "lifeStyle.morningStretchingDescription": "تحسين تدفق الدم والمرونة", + "lifeStyle.balanceTrainingTitle": "تمارين التوازن", + "lifeStyle.balanceTrainingDescription": "تقوية عضلات الجسم الأساسية وتحسين القوام" } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 0676779..403a887 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -125,5 +125,11 @@ "metricsReport.description": "Your report helps us improve your care", "metricsReport.sendButton": "Submit daily report", "metricsReport.submitSuccess": "Submitted successfully!", - "dailyReport.title": "My Metrics (PROMs)" + "dailyReport.title": "My Metrics (PROMs)", + "lifeStyle.todayRecommendations": "Today's Recommendations", + "lifeStyle.balanceExercises": "Balance Exercises", + "lifeStyle.morningStretchingTitle": "Morning Stretching", + "lifeStyle.morningStretchingDescription": "Improve Blood Flow and Flexibility", + "lifeStyle.balanceTrainingTitle": "Balance Training", + "lifeStyle.balanceTrainingDescription": "Strengthen Core Muscles and Posture" } diff --git a/src/locales/he/translation.json b/src/locales/he/translation.json index 752cb48..db0aa5b 100644 --- a/src/locales/he/translation.json +++ b/src/locales/he/translation.json @@ -126,5 +126,11 @@ "metricsReport.description": "הדיווח שלך עוזר לנו לשפר את הטיפול", "metricsReport.sendButton": "שלח דיווח יומי", "metricsReport.submitSuccess": "בוצע בהצלחה!", - "dailyReport.title": "המדדים שלי (PROMs)" + "dailyReport.title": "המדדים שלי (PROMs)", + "lifeStyle.todayRecommendations": "המלצות להיום", + "lifeStyle.balanceExercises": "תרגילי שיווי משקל", + "lifeStyle.morningStretchingTitle": "מתיחות בוקר", + "lifeStyle.morningStretchingDescription": "שיפור זרימת דם וגמישות", + "lifeStyle.balanceTrainingTitle": "אימון שיווי משקל", + "lifeStyle.balanceTrainingDescription": "חיזוק שרירי ליבה ויציבה" } diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json index 451602f..825f4fb 100644 --- a/src/locales/ru/translation.json +++ b/src/locales/ru/translation.json @@ -125,5 +125,11 @@ "metricsReport.description": "Ваш отчет помогает нам улучшить лечение", "metricsReport.sendButton": "Отправить ежедневный отчет", "metricsReport.submitSuccess": "Отправлено успешно!", - "dailyReport.title": "Мои показатели (PROMs)" + "dailyReport.title": "Мои показатели (PROMs)", + "lifeStyle.todayRecommendations": "Рекомендации на сегодня", + "lifeStyle.balanceExercises": "Упражнения на равновесие", + "lifeStyle.morningStretchingTitle": "Утренняя растяжка", + "lifeStyle.morningStretchingDescription": "Улучшение кровообращения и гибкости", + "lifeStyle.balanceTrainingTitle": "Тренировка равновесия", + "lifeStyle.balanceTrainingDescription": "Укрепление мышц кора и осанки" } diff --git a/src/pages/lifeStyle/LifeStyle.tsx b/src/pages/lifeStyle/LifeStyle.tsx index 8e8429a..ebd5985 100644 --- a/src/pages/lifeStyle/LifeStyle.tsx +++ b/src/pages/lifeStyle/LifeStyle.tsx @@ -1,12 +1,9 @@ -import { useTranslation } from 'react-i18next' -import { BalanceTraining } from './physioAndTrainingTab/balanceTraining/BalanceTraining' +import { RecomendationTraining } from './physioAndTrainingTab/recomendationTraining/RecomendationTraining' export const LifeStyle = () => { - const { t } = useTranslation() return ( <> -
{t('lifestyle.page')}
- + ) } diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx new file mode 100644 index 0000000..d092b16 --- /dev/null +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx @@ -0,0 +1,74 @@ +import { SGLTypography } from '@/components/UI/Typography/SGLTypography' +import { SGLVideoCard } from '@/components/UI/Video/SGLVideoCard' +import { useTranslation } from 'react-i18next' +import { BalanceTraining } from '../balanceTraining/BalanceTraining' +import { + rootStyle_mobile, + rootStyle_desktop, + videoConteiner_desktop, + header_desktop, +} from './style' +import { useIsMobile } from '@/hooks/useIsMobile' + +export const RecomendationTraining = () => { + const { t } = useTranslation() + const isMobile = useIsMobile() + + return ( + <> + {isMobile ? ( +
+ + {t('lifeStyle.todayRecommendations')} + + + + + {t('lifeStyle.balanceExercises')} + + +
+ ) : ( +
+
+
+ + {t('lifeStyle.todayRecommendations')} + +
+
+ + +
+
+
+
+ + {t('lifeStyle.balanceExercises')} + +
+
+ +
+
+
+ )} + + ) +} diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts new file mode 100644 index 0000000..382dc92 --- /dev/null +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts @@ -0,0 +1,27 @@ +import type { CSSProperties } from 'react' + +export const rootStyle_mobile = { + display: 'flex', + flexDirection: 'column', + gap: '1rem', + padding: '1rem', + paddingBottom: '1rem', +} as CSSProperties + +export const rootStyle_desktop = { + display: 'flex', + gap: '1rem', + padding: '1rem', + paddingBottom: '1rem', +} as CSSProperties + +export const videoConteiner_desktop = { + display: 'flex', + gap: '1rem', + paddingTop: '1rem', +} as CSSProperties + +export const header_desktop = { + paddingTop: '0.5em', + paddingBottom: '0.5rem', +} as CSSProperties From 62c0e9983b999aec76fdfa6d5d6b364d6187c61d Mon Sep 17 00:00:00 2001 From: Rachel Shtern Date: Mon, 1 Jun 2026 17:11:24 +0300 Subject: [PATCH 2/3] fix: Add desktop component --- src/constants/index.ts | 2 + src/pages/lifeStyle/LifeStyle.tsx | 6 +- .../RecomendationTraining.tsx | 72 +------------------ .../RecomendationTrainingDesktop.tsx | 49 +++++++++++++ .../RecomendationTrainingMobile.tsx | 34 +++++++++ .../recomendationTraining/style.ts | 11 ++- 6 files changed, 99 insertions(+), 75 deletions(-) create mode 100644 src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx create mode 100644 src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx diff --git a/src/constants/index.ts b/src/constants/index.ts index bb59691..5cf56e9 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -2,3 +2,5 @@ export const DOT = '•' export const METRIC_MAX_VALUE = '10' export const SLIDER_MIN_VALUE = 1 export const SLIDER_MAX_VALUE = 10 +export const BALANCE_VIDEO_TIME = 15 +export const STRETCH_VIDEO_TIME = 10 diff --git a/src/pages/lifeStyle/LifeStyle.tsx b/src/pages/lifeStyle/LifeStyle.tsx index ebd5985..743df60 100644 --- a/src/pages/lifeStyle/LifeStyle.tsx +++ b/src/pages/lifeStyle/LifeStyle.tsx @@ -1,9 +1,5 @@ import { RecomendationTraining } from './physioAndTrainingTab/recomendationTraining/RecomendationTraining' export const LifeStyle = () => { - return ( - <> - - - ) + return } diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx index d092b16..1e592d8 100644 --- a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx @@ -1,74 +1,8 @@ -import { SGLTypography } from '@/components/UI/Typography/SGLTypography' -import { SGLVideoCard } from '@/components/UI/Video/SGLVideoCard' -import { useTranslation } from 'react-i18next' -import { BalanceTraining } from '../balanceTraining/BalanceTraining' -import { - rootStyle_mobile, - rootStyle_desktop, - videoConteiner_desktop, - header_desktop, -} from './style' import { useIsMobile } from '@/hooks/useIsMobile' - +import { RecomendationTrainingMobile } from './RecomendationTrainingMobile' +import { RecomendationTrainingDesktop } from './RecomendationTrainingDesktop' export const RecomendationTraining = () => { - const { t } = useTranslation() const isMobile = useIsMobile() - return ( - <> - {isMobile ? ( -
- - {t('lifeStyle.todayRecommendations')} - - - - - {t('lifeStyle.balanceExercises')} - - -
- ) : ( -
-
-
- - {t('lifeStyle.todayRecommendations')} - -
-
- - -
-
-
-
- - {t('lifeStyle.balanceExercises')} - -
-
- -
-
-
- )} - - ) + return <>{isMobile ? : } } diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx new file mode 100644 index 0000000..77d9ae3 --- /dev/null +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx @@ -0,0 +1,49 @@ +import { SGLTypography } from '@/components/UI/Typography/SGLTypography' +import { SGLVideoCard } from '@/components/UI/Video/SGLVideoCard' +import { useTranslation } from 'react-i18next' +import { BalanceTraining } from '../balanceTraining/BalanceTraining' +import { + rootStyle_desktop, + conteiner_desktop, + header_desktop, + videoContainer_desktop, +} from './style' +import { BALANCE_VIDEO_TIME, STRETCH_VIDEO_TIME } from '@/constants' + +export const RecomendationTrainingDesktop = () => { + const { t } = useTranslation() + + return ( +
+
+
+ + {t('lifeStyle.todayRecommendations')} + +
+
+ + +
+
+
+
+ + {t('lifeStyle.balanceExercises')} + +
+
+ +
+
+
+ ) +} diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx new file mode 100644 index 0000000..3506c71 --- /dev/null +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx @@ -0,0 +1,34 @@ +import { SGLTypography } from '@/components/UI/Typography/SGLTypography' +import { SGLVideoCard } from '@/components/UI/Video/SGLVideoCard' +import { useTranslation } from 'react-i18next' +import { BalanceTraining } from '../balanceTraining/BalanceTraining' +import { rootStyle_mobile } from './style' +import { BALANCE_VIDEO_TIME, STRETCH_VIDEO_TIME } from '@/constants' + +export const RecomendationTrainingMobile = () => { + const { t } = useTranslation() + + return ( + <> +
+ + {t('lifeStyle.todayRecommendations')} + + + + + {t('lifeStyle.balanceExercises')} + + +
+ + ) +} diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts index 382dc92..d111cb0 100644 --- a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts @@ -10,13 +10,16 @@ export const rootStyle_mobile = { export const rootStyle_desktop = { display: 'flex', + flexDirection: 'row', gap: '1rem', padding: '1rem', paddingBottom: '1rem', } as CSSProperties -export const videoConteiner_desktop = { +export const conteiner_desktop = { display: 'flex', + flexDirection: 'column', + flex: 1, gap: '1rem', paddingTop: '1rem', } as CSSProperties @@ -25,3 +28,9 @@ export const header_desktop = { paddingTop: '0.5em', paddingBottom: '0.5rem', } as CSSProperties + +export const videoContainer_desktop = { + display: 'flex', + flexDirection: 'column', + gap: '0.5rem', +} as CSSProperties From a12126b30d133e9be2b4d7293d972ddbab347e06 Mon Sep 17 00:00:00 2001 From: Rachel Shtern Date: Tue, 2 Jun 2026 10:25:48 +0300 Subject: [PATCH 3/3] fix --- .../RecomendationTraining.tsx | 2 +- .../RecomendationTrainingDesktop.tsx | 19 +++++++------------ .../RecomendationTrainingMobile.tsx | 4 ++-- .../recomendationTraining/style.ts | 10 +++++----- 4 files changed, 15 insertions(+), 20 deletions(-) diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx index 1e592d8..51479b6 100644 --- a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx @@ -4,5 +4,5 @@ import { RecomendationTrainingDesktop } from './RecomendationTrainingDesktop' export const RecomendationTraining = () => { const isMobile = useIsMobile() - return <>{isMobile ? : } + return isMobile ? : } diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx index 77d9ae3..41f856b 100644 --- a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx @@ -2,26 +2,21 @@ import { SGLTypography } from '@/components/UI/Typography/SGLTypography' import { SGLVideoCard } from '@/components/UI/Video/SGLVideoCard' import { useTranslation } from 'react-i18next' import { BalanceTraining } from '../balanceTraining/BalanceTraining' -import { - rootStyle_desktop, - conteiner_desktop, - header_desktop, - videoContainer_desktop, -} from './style' +import { rootStyleDesktop, conteinerDesktop, headerDesktop, videoContainerDesktop } from './style' import { BALANCE_VIDEO_TIME, STRETCH_VIDEO_TIME } from '@/constants' export const RecomendationTrainingDesktop = () => { const { t } = useTranslation() return ( -
-
-
+
+
+
{t('lifeStyle.todayRecommendations')}
-
+
{ />
-
-
+
+
{t('lifeStyle.balanceExercises')} diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx index 3506c71..f143dcd 100644 --- a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingMobile.tsx @@ -2,7 +2,7 @@ import { SGLTypography } from '@/components/UI/Typography/SGLTypography' import { SGLVideoCard } from '@/components/UI/Video/SGLVideoCard' import { useTranslation } from 'react-i18next' import { BalanceTraining } from '../balanceTraining/BalanceTraining' -import { rootStyle_mobile } from './style' +import { rootStyleMobile } from './style' import { BALANCE_VIDEO_TIME, STRETCH_VIDEO_TIME } from '@/constants' export const RecomendationTrainingMobile = () => { @@ -10,7 +10,7 @@ export const RecomendationTrainingMobile = () => { return ( <> -
+
{t('lifeStyle.todayRecommendations')} diff --git a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts index d111cb0..da2b954 100644 --- a/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts +++ b/src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts @@ -1,6 +1,6 @@ import type { CSSProperties } from 'react' -export const rootStyle_mobile = { +export const rootStyleMobile = { display: 'flex', flexDirection: 'column', gap: '1rem', @@ -8,7 +8,7 @@ export const rootStyle_mobile = { paddingBottom: '1rem', } as CSSProperties -export const rootStyle_desktop = { +export const rootStyleDesktop = { display: 'flex', flexDirection: 'row', gap: '1rem', @@ -16,7 +16,7 @@ export const rootStyle_desktop = { paddingBottom: '1rem', } as CSSProperties -export const conteiner_desktop = { +export const conteinerDesktop = { display: 'flex', flexDirection: 'column', flex: 1, @@ -24,12 +24,12 @@ export const conteiner_desktop = { paddingTop: '1rem', } as CSSProperties -export const header_desktop = { +export const headerDesktop = { paddingTop: '0.5em', paddingBottom: '0.5rem', } as CSSProperties -export const videoContainer_desktop = { +export const videoContainerDesktop = { display: 'flex', flexDirection: 'column', gap: '0.5rem',