Skip to content

Commit 64dad63

Browse files
dawalbertodawalberto
committed
separate bmr and exercise multiplier
1 parent 1caa1ab commit 64dad63

File tree

4 files changed

+60
-49
lines changed

4 files changed

+60
-49
lines changed

‎src/components/BMRSelector.tsx

Lines changed: 17 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,31 @@
1-
import { defaultBMREquation, defaultExerciseMultiplier } from '@lib/defaults'
1+
import { defaultBMREquation } from '@lib/defaults'
22
import { selectStyles } from '@styles/selects'
33
import { calculateAndUpdateBMR } from '@utils/bmr-functions'
44
import clsx from 'clsx'
5-
import type { BMREquation, ExerciseMultiplier } from 'src/types'
5+
import type { BMREquation } from 'src/types'
66

77
export const BMRSelector = () => {
88
const handleBMREquationChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
99
const equation: BMREquation = event.target.value as unknown as BMREquation
1010
calculateAndUpdateBMR({ equation })
1111
}
1212

13-
const handleExerciseMultiplierChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
14-
const exerciseMultiplier = event.target.value as unknown as ExerciseMultiplier
15-
calculateAndUpdateBMR({ exerciseMultiplier })
16-
}
17-
1813
return (
19-
<div className='flex w-full flex-col gap-4'>
20-
<div>
21-
<label htmlFor='BMREquation' className='mb-2 block text-sm font-medium text-sky-900'>
22-
BMR equation
23-
</label>
24-
<select
25-
id='BMREquation'
26-
name='BMREquation'
27-
defaultValue={defaultBMREquation}
28-
onChange={handleBMREquationChange}
29-
className={bmrSelectStyles}
30-
>
31-
<option value='Mifflin St Jeor'>Mifflin St Jeor</option>
32-
<option value='Revised Harris-Benedict'>Revised Harris-Benedict</option>
33-
<option value='Katch-McArdle'>Katch-McArdle</option>
34-
</select>
35-
</div>
36-
<div>
37-
<label htmlFor='exerciseMultiplier' className='mb-2 block text-sm font-medium text-sky-900'>
38-
Exercise multiplier
39-
</label>
40-
<select
41-
id='exerciseMultiplier'
42-
name='exerciseMultiplier'
43-
defaultValue={defaultExerciseMultiplier}
44-
onChange={handleExerciseMultiplierChange}
45-
className={bmrSelectStyles}
46-
>
47-
<option value='Sedentary'>🥱 Sedentary</option>
48-
<option value='Lightly active'>🏃‍♂️ Lightly active</option>
49-
<option value='Moderately active'>💪 Moderately active</option>
50-
<option value='Very active'>🏋️‍♀️ Very active</option>
51-
<option value='Extremely active'>🔥 Extremely active</option>
52-
</select>
53-
</div>
14+
<div className='w-full'>
15+
<label htmlFor='BMREquation' className='mb-2 block text-sm font-medium text-amber-900'>
16+
BMR equation
17+
</label>
18+
<select
19+
id='BMREquation'
20+
name='BMREquation'
21+
defaultValue={defaultBMREquation}
22+
onChange={handleBMREquationChange}
23+
className={clsx(selectStyles, 'border-amber-300 bg-amber-50 text-amber-900 focus:border-amber-500 focus:ring-amber-500')}
24+
>
25+
<option value='Mifflin St Jeor'>Mifflin St Jeor</option>
26+
<option value='Revised Harris-Benedict'>Revised Harris-Benedict</option>
27+
<option value='Katch-McArdle'>Katch-McArdle</option>
28+
</select>
5429
</div>
5530
)
5631
}
57-
58-
const bmrSelectStyles = clsx(selectStyles, 'border-sky-300 bg-sky-50 text-sky-900 focus:border-sky-500 focus:ring-sky-500')

‎src/components/ExerciseMultiplier.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { defaultExerciseMultiplier } from '@lib/defaults'
2+
import { selectStyles } from '@styles/selects'
3+
import { calculateAndUpdateBMR } from '@utils/bmr-functions'
4+
import clsx from 'clsx'
5+
import type { ExerciseMultiplier as EM } from 'src/types'
6+
7+
export const ExerciseMultiplier = () => {
8+
const handleExerciseMultiplierChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
9+
const exerciseMultiplier = event.target.value as unknown as EM
10+
calculateAndUpdateBMR({ exerciseMultiplier })
11+
}
12+
13+
return (
14+
<div className='w-full'>
15+
<label htmlFor='exerciseMultiplier' className='mb-2 block text-sm font-medium text-sky-900'>
16+
Exercise multiplier
17+
</label>
18+
<select
19+
id='exerciseMultiplier'
20+
name='exerciseMultiplier'
21+
defaultValue={defaultExerciseMultiplier}
22+
onChange={handleExerciseMultiplierChange}
23+
className={bmrSelectStyles}
24+
>
25+
<option value='Sedentary'>🥱 Sedentary</option>
26+
<option value='Lightly active'>🏃‍♂️ Lightly active</option>
27+
<option value='Moderately active'>💪 Moderately active</option>
28+
<option value='Very active'>🏋️‍♀️ Very active</option>
29+
<option value='Extremely active'>🔥 Extremely active</option>
30+
</select>
31+
</div>
32+
)
33+
}
34+
35+
const bmrSelectStyles = clsx(selectStyles, 'border-sky-300 bg-sky-50 text-sky-900 focus:border-sky-500 focus:ring-sky-500')

‎src/pages/index.astro

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { BMRSelector } from '@components/BMRSelector'
33
import ChartMacros from '@components/ChartMacros.astro'
44
import { Dashboard } from '@components/Dashboard'
5+
import { ExerciseMultiplier } from '@components/ExerciseMultiplier'
56
import { GoalSelector } from '@components/GoalSelector'
67
import { LBMSelector } from '@components/LBMSelector'
78
import '@styles/selects.css'
@@ -34,6 +35,9 @@ import '@styles/selects.css'
3435
<div>
3536
<GoalSelector client:load />
3637
</div>
38+
<div>
39+
<ExerciseMultiplier client:load />
40+
</div>
3741
<div>
3842
<ChartMacros />
3943
</div>
@@ -44,7 +48,6 @@ import '@styles/selects.css'
4448
<BMRSelector client:load />
4549
</div>
4650
</div>
47-
<!-- <Development client:load /> -->
4851
</div>
4952
</body>
5053
</html>

‎src/utils/chart-config.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ export const chartConfiguration: ChartConfiguration<'pie', number[], unknown> |
1010
{
1111
// label: 'My First Dataset',
1212
data: [defaultCarbsGrams * 4, defaultFatsGrams * 9, defaultProteinsGrams * 4],
13-
backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
13+
backgroundColor: ['#f59e0b', '#fde047', '#38bdf8'],
1414
// hoverOffset: 4,
1515
borderColor: '#4b5563',
16-
borderWidth: 2,
16+
borderWidth: 1.8,
1717
hoverBorderColor: '#030712',
1818
},
1919
],
@@ -56,8 +56,8 @@ export const chartConfiguration: ChartConfiguration<'pie', number[], unknown> |
5656
position: 'left',
5757
labels: {
5858
padding: 20,
59-
boxWidth: 25,
60-
boxHeight: 25,
59+
boxWidth: 20,
60+
boxHeight: 20,
6161
color: '#334155',
6262
font: {
6363
weight: 500,

0 commit comments

Comments
 (0)