feat: RecomendationTraining component

src/components/UI/Video/SGLVideoCard.tsx

@@ -25,7 +25,7 @@ export const SGLVideoCard = ({
   const theme = useTheme()
 
   return (
-    <SGLCard variant="outlined" style={styles.card} onClick={onClick}>
+    <SGLCard variant="white" style={styles.card} onClick={onClick}>
       <div style={styles.content}>
         <SGLTypography variant="smallTitle">{title}</SGLTypography>
         <SGLTypography variant="smallText">{description}</SGLTypography>

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

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": "تقوية عضلات الجسم الأساسية وتحسين القوام"
 }

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"
 }

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": "חיזוק שרירי ליבה ויציבה"
 }

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": "Укрепление мышц кора и осанки"
 }

src/pages/lifeStyle/LifeStyle.tsx

@@ -1,12 +1,5 @@
-import { useTranslation } from 'react-i18next'
-import { BalanceTraining } from './physioAndTrainingTab/balanceTraining/BalanceTraining'
+import { RecomendationTraining } from './physioAndTrainingTab/recomendationTraining/RecomendationTraining'
 
 export const LifeStyle = () => {
-  const { t } = useTranslation()
-  return (
-    <>
-      <div>{t('lifestyle.page')}</div>
-      <BalanceTraining />
-    </>
-  )
+  return <RecomendationTraining />
 }

src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTraining.tsx

@@ -0,0 +1,8 @@
+import { useIsMobile } from '@/hooks/useIsMobile'
+import { RecomendationTrainingMobile } from './RecomendationTrainingMobile'
+import { RecomendationTrainingDesktop } from './RecomendationTrainingDesktop'
+export const RecomendationTraining = () => {
+  const isMobile = useIsMobile()
+
+  return isMobile ? <RecomendationTrainingMobile /> : <RecomendationTrainingDesktop />
+}

src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/RecomendationTrainingDesktop.tsx

@@ -0,0 +1,44 @@
+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 { rootStyleDesktop, conteinerDesktop, headerDesktop, videoContainerDesktop } from './style'
+import { BALANCE_VIDEO_TIME, STRETCH_VIDEO_TIME } from '@/constants'
+
+export const RecomendationTrainingDesktop = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div style={rootStyleDesktop}>
+      <div style={conteinerDesktop}>
+        <div style={headerDesktop}>
+          <SGLTypography variant="mediumTitle" color="black">
+            {t('lifeStyle.todayRecommendations')}
+          </SGLTypography>
+        </div>
+        <div style={videoContainerDesktop}>
+          <SGLVideoCard
+            title={t('lifeStyle.morningStretchingTitle')}
+            description={t('lifeStyle.morningStretchingDescription')}
+            durationInMinutes={STRETCH_VIDEO_TIME}
+          />
+          <SGLVideoCard
+            title={t('lifeStyle.balanceTrainingTitle')}
+            description={t('lifeStyle.balanceTrainingDescription')}
+            durationInMinutes={BALANCE_VIDEO_TIME}
+          />
+        </div>
+      </div>
+      <div style={conteinerDesktop}>
+        <div style={headerDesktop}>
+          <SGLTypography variant="mediumTitle" color="black">
+            {t('lifeStyle.balanceExercises')}
+          </SGLTypography>
+        </div>
+        <div>
+          <BalanceTraining />
+        </div>
+      </div>
+    </div>
+  )
+}

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 { rootStyleMobile } from './style'
+import { BALANCE_VIDEO_TIME, STRETCH_VIDEO_TIME } from '@/constants'
+
+export const RecomendationTrainingMobile = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <div style={rootStyleMobile}>
+        <SGLTypography variant="mediumTitle" color="black">
+          {t('lifeStyle.todayRecommendations')}
+        </SGLTypography>
+        <SGLVideoCard
+          title={t('lifeStyle.morningStretchingTitle')}
+          description={t('lifeStyle.morningStretchingDescription')}
+          durationInMinutes={STRETCH_VIDEO_TIME}
+        />
+        <SGLVideoCard
+          title={t('lifeStyle.balanceTrainingTitle')}
+          description={t('lifeStyle.balanceTrainingDescription')}
+          durationInMinutes={BALANCE_VIDEO_TIME}
+        />
+        <SGLTypography variant="mediumTitle" color="black">
+          {t('lifeStyle.balanceExercises')}
+        </SGLTypography>
+        <BalanceTraining />
+      </div>
+    </>
+  )
+}

src/pages/lifeStyle/physioAndTrainingTab/recomendationTraining/style.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties } from 'react'
+
+export const rootStyleMobile = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1rem',
+  padding: '1rem',
+  paddingBottom: '1rem',
+} as CSSProperties
+
+export const rootStyleDesktop = {
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '1rem',
+  padding: '1rem',
+  paddingBottom: '1rem',
+} as CSSProperties
+
+export const conteinerDesktop = {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  gap: '1rem',
+  paddingTop: '1rem',
+} as CSSProperties
+
+export const headerDesktop = {
+  paddingTop: '0.5em',
+  paddingBottom: '0.5rem',
+} as CSSProperties
+
+export const videoContainerDesktop = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+} as CSSProperties