Feat/diet recipe card

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@swc/core': false
+  esbuild: false

src/components/UI/Divider/SGLDivider.tsx

@@ -0,0 +1,16 @@
+import { Box, useTheme } from '@mui/material'
+import { getDividerStyles } from './styles'
+
+interface SGLDividerProps {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export const SGLDivider = ({ orientation = 'horizontal' }: SGLDividerProps = {}) => {
+  const theme = useTheme()
+  const dividerStyles = getDividerStyles(theme)
+
+  const styles =
+    orientation === 'vertical' ? dividerStyles.dividerVertical : dividerStyles.dividerHorizontal
+
+  return <Box style={styles} />
+}

src/components/UI/Divider/index.ts

@@ -0,0 +1 @@
+export { SGLDivider } from './SGLDivider'

src/components/UI/Divider/styles.ts

@@ -1,5 +1,25 @@
-import { styled } from '@mui/material'
+import type { Theme } from '@mui/material'
+import type { CSSProperties } from 'react'
 
-export const SGLDivider = styled('div')(() => ({
-  display: 'none',
-}))
+export interface DividerStylesInterface {
+  dividerHorizontal: CSSProperties
+  dividerVertical: CSSProperties
+}
+
+export const getDividerStyles = (theme: Theme): DividerStylesInterface => ({
+  dividerHorizontal: {
+    width: '100%',
+    height: '1px',
+    backgroundColor: theme.palette.mediumGrey?.main || '#e0e0e0',
+    marginTop: '1.5rem',
+    marginBottom: '1.5rem',
+  },
+
+  dividerVertical: {
+    width: '1px',
+    height: '100%',
+    backgroundColor: theme.palette.mediumGrey?.main || '#e0e0e0',
+    marginLeft: '1.5rem',
+    marginRight: '1.5rem',
+  },
+})

src/locales/ar/translation.json

@@ -84,5 +84,11 @@
   "lifeStyle.morningStretchingTitle": "تمارين التمدد الصباحية",
   "lifeStyle.morningStretchingDescription": "تحسين تدفق الدم والمرونة",
   "lifeStyle.balanceTrainingTitle": "تمارين التوازن",
-  "lifeStyle.balanceTrainingDescription": "تقوية عضلات الجسم الأساسية وتحسين القوام"
+  "lifeStyle.balanceTrainingDescription": "تقوية عضلات الجسم الأساسية وتحسين القوام",
+  "mealRecommendation.viewFullRecipe": "عرض الوصفة الكاملة",
+  "mealRecommendation.close": "إغلاق",
+  "mealRecommendation.lunch": "غداء موصى به",
+  "mealRecommendation.breakfast": "إفطار موصى به",
+  "mealRecommendation.dinner": "عشاء موصى به",
+  "mealRecommendation.dailyMeals": "وجباتك اليومية"
 }

src/locales/en/translation.json

@@ -131,5 +131,11 @@
   "lifeStyle.morningStretchingTitle": "Morning Stretching",
   "lifeStyle.morningStretchingDescription": "Improve Blood Flow and Flexibility",
   "lifeStyle.balanceTrainingTitle": "Balance Training",
-  "lifeStyle.balanceTrainingDescription": "Strengthen Core Muscles and Posture"
+  "lifeStyle.balanceTrainingDescription": "Strengthen Core Muscles and Posture",
+  "mealRecommendation.viewFullRecipe": "View Full Recipe",
+  "mealRecommendation.close": "Close",
+  "mealRecommendation.lunch": "Recommended Lunch",
+  "mealRecommendation.breakfast": "Recommended Breakfast",
+  "mealRecommendation.dinner": "Recommended Dinner",
+  "mealRecommendation.dailyMeals": "Your Daily Meals"
 }

src/locales/he/translation.json

@@ -132,5 +132,11 @@
   "lifeStyle.morningStretchingTitle": "מתיחות בוקר",
   "lifeStyle.morningStretchingDescription": "שיפור זרימת דם וגמישות",
   "lifeStyle.balanceTrainingTitle": "אימון שיווי משקל",
-  "lifeStyle.balanceTrainingDescription": "חיזוק שרירי ליבה ויציבה"
+  "lifeStyle.balanceTrainingDescription": "חיזוק שרירי ליבה ויציבה",
+  "mealRecommendation.viewFullRecipe": "צפה במתכון המלא",
+  "mealRecommendation.close": "סגור",
+  "mealRecommendation.lunch": "ארוחת צהריים מומלצת",
+  "mealRecommendation.breakfast": "ארוחת בוקר מומלצת",
+  "mealRecommendation.dinner": "ארוחת ערב מומלצת",
+  "mealRecommendation.dailyMeals": "הארוחות המומלצות שלך"
 }

src/locales/ru/translation.json

@@ -131,5 +131,11 @@
   "lifeStyle.morningStretchingTitle": "Утренняя растяжка",
   "lifeStyle.morningStretchingDescription": "Улучшение кровообращения и гибкости",
   "lifeStyle.balanceTrainingTitle": "Тренировка равновесия",
-  "lifeStyle.balanceTrainingDescription": "Укрепление мышц кора и осанки"
+  "lifeStyle.balanceTrainingDescription": "Укрепление мышц кора и осанки",
+  "mealRecommendation.viewFullRecipe": "Просмотреть полный рецепт",
+  "mealRecommendation.close": "Закрыть",
+  "mealRecommendation.lunch": "Рекомендуемый обед",
+  "mealRecommendation.breakfast": "Рекомендуемый завтрак",
+  "mealRecommendation.dinner": "Рекомендуемый ужин",
+  "mealRecommendation.dailyMeals": "Ваши ежедневные приемы пищи"
 }

src/pages/lifeStyle/LifeStyle.tsx

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

src/pages/lifeStyle/dietTab/DietTabExample.tsx

@@ -0,0 +1,87 @@
+import { useTranslation } from 'react-i18next'
+import { SGLMealRecommendation } from './mealRecommendation'
+
+export const DietTabExample = () => {
+  const { t } = useTranslation()
+  const mealsData = [
+    {
+      mealType: 'ארוחת צהריים מומלצת',
+      name: 'סלמון אפוי',
+      recipe: 'סלמון טרי אפוי עם לימון וצמחי תיבול',
+      fullRecipe: `סלמון אפוי עם לימון וצמחי תיבול - מומלץ מאוד לבריאות הלב
+
+חומרים:
+• 200 גר סלמון טרי
+• לימון אחד
+• בזיליקום, כוסברה, דיל
+• שמן זית
+
+הוראות:
+1. חמם תנור ל-180 מעלות
+2. הנח סלמון על נייר אפייה
+3. ריסה עם שמן זית, מלח ופלפל
+4. פזר צמחי תיבול
+5. אפה 15-20 דקות עד שהסלמון בשל
+6. הגש עם לימון טרי`,
+    },
+    {
+      mealType: 'חטיף מומלץ',
+      name: 'סלט ירוקים',
+      recipe: 'תערובת ירוקים טרייה עם עגבניה ומלפפון',
+      fullRecipe: `סלט ירוקים טרי ובריא
+
+חומרים:
+• עלי סלט מעורבים 150 גר
+• 2 עגבניות בינוניות
+• מלפפון אחד
+• בצל אדום קצוץ
+• זיתים שחורים
+• שמן זית וחומץ בלסמי
+
+הוראות:
+1. שטוף את הירוקים היטב
+2. חתוך את הירקות לגדלים נוחים
+3. מיזג את כל החומרים בקערה
+4. מחבל שמן זית וחומץ בחומס בנפרד
+5. מוזג את הרוטב על הסלט
+6. ערבב ברכות`,
+    },
+    {
+      mealType: 'ארוחת ערב מומלצת',
+      name: 'עוף ברוטב עלים',
+      recipe: 'עוף צלול עם רוטב עלים טבעי וחומרים מזינים',
+      fullRecipe: `עוף ברוטב עלים טבעי
+
+חומרים:
+• 250 גר בקע עוף
+• 100 מ"ל מרק עוף
+• כוסברית, בזיליקום, כוסבר
+• שום 2 שיניים
+• שמן זית
+
+הוראות:
+1. חמם שמן זית בחליה
+2. הוסף בקע עוף עד להשחמה
+3. הוסף שום קצוץ
+4. שפוך מרק עוף
+5. הוסף צמחי תיבול
+6. בישול על אש בינונית 15-20 דקות
+7. הגש חם`,
+    },
+  ]
+
+  return (
+    <div style={{ padding: '16px' }}>
+      <h2>{t('mealRecommendation.dailyMeals')}</h2>
+      {mealsData.map((meal, index) => (
+        <SGLMealRecommendation
+          key={index}
+          mealType={meal.mealType}
+          name={meal.name}
+          recipe={meal.recipe}
+          fullRecipe={meal.fullRecipe}
+        />
+      ))}
+    </div>
+  )
+}

src/pages/lifeStyle/dietTab/mealRecommendation/MealCard.tsx

@@ -0,0 +1,51 @@
+import { Typography } from '@mui/material'
+import { useTheme } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { getMealRecommendationStyles } from './styles'
+import { SGLButton } from '../../../../components/UI/Button/SGLButton'
+import { SGLCard } from '../../../../components/UI/Card/SGLCard'
+import { SGLLink } from '../../../../components/UI/Icons/Link/SGLLink'
+import { SGLTypography } from '../../../../components/UI/Typography/SGLTypography'
+import { variantMap } from '../../../../components/UI/Typography/types'
+
+interface MealCardProps {
+  mealType: string
+  name: string
+  recipe: string
+  imageUrl?: string
+  onOpenDialog: () => void
+}
+
+export const MealCard = ({ mealType, name, recipe, imageUrl, onOpenDialog }: MealCardProps) => {
+  const theme = useTheme()
+  const { t } = useTranslation()
+  const styles = getMealRecommendationStyles(theme)
+
+  return (
+    <>
+      <Typography variant="h6" sx={{ marginBottom: 1, fontWeight: 600 }}>
+        {mealType}
+      </Typography>
+      <SGLCard variant="white">
+        <div style={styles.container}>
+          <div style={styles.heroImage(imageUrl)}>
+            <div style={styles.iconContainer}>
+              <SGLLink {...styles.linkIcon} />
+            </div>
+          </div>
+          <div style={styles.content}>
+            <Typography variant={variantMap.smallTitle}>{name}</Typography>
+            <Typography variant={variantMap.smallText}>{recipe}</Typography>
+          </div>
+          <div style={styles.buttonWrapper}>
+            <SGLButton onClick={onOpenDialog} variant="outlined" sx={styles.mealButton(theme)}>
+              <SGLTypography variant="smallTitle">
+                {t('mealRecommendation.viewFullRecipe')}
+              </SGLTypography>
+            </SGLButton>
+          </div>
+        </div>
+      </SGLCard>
+    </>
+  )
+}

src/pages/lifeStyle/dietTab/mealRecommendation/MealDialog.tsx

@@ -0,0 +1,34 @@
+import { Typography, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material'
+import { useTheme } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import { getMealRecommendationStyles } from './styles'
+import { SGLButton } from '../../../../components/UI/Button/SGLButton'
+import { variantMap } from '../../../../components/UI/Typography/types'
+
+interface MealDialogProps {
+  name: string
+  recipe: string
+  fullRecipe?: string
+  open: boolean
+  onClose: () => void
+}
+
+export const MealDialog = ({ name, recipe, fullRecipe, open, onClose }: MealDialogProps) => {
+  const theme = useTheme()
+  const { t } = useTranslation()
+  const styles = getMealRecommendationStyles(theme)
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth>
+      <DialogTitle sx={styles.dialogTitle}>{name}</DialogTitle>
+      <DialogContent>
+        <Typography variant={variantMap.mediumText}>{fullRecipe || recipe}</Typography>
+      </DialogContent>
+      <DialogActions>
+        <SGLButton onClick={onClose} fullWidth variant="contained" sx={styles.closeButton}>
+          {t('mealRecommendation.close')}
+        </SGLButton>
+      </DialogActions>
+    </Dialog>
+  )
+}

src/pages/lifeStyle/dietTab/mealRecommendation/MealRecommendation.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import { MealCard } from './MealCard'
+import { MealDialog } from './MealDialog'
+
+interface SGLMealRecommendationProps {
+  mealType: string
+  name: string
+  recipe: string
+  fullRecipe?: string
+  imageUrl?: string
+}
+
+export const SGLMealRecommendation = ({
+  mealType,
+  name,
+  recipe,
+  fullRecipe,
+  imageUrl,
+}: SGLMealRecommendationProps) => {
+  const [openDialog, setOpenDialog] = useState(false)
+
+  return (
+    <>
+      <MealCard
+        mealType={mealType}
+        name={name}
+        recipe={recipe}
+        imageUrl={imageUrl}
+        onOpenDialog={() => setOpenDialog(true)}
+      />
+      <MealDialog
+        name={name}
+        recipe={recipe}
+        fullRecipe={fullRecipe}
+        open={openDialog}
+        onClose={() => setOpenDialog(false)}
+      />
+    </>
+  )
+}

src/pages/lifeStyle/dietTab/mealRecommendation/index.ts

@@ -0,0 +1 @@
+export { SGLMealRecommendation } from './MealRecommendation'