659 lines
34 KiB
TypeScript
659 lines
34 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { X, Calculator, Droplets, Activity, Scale, ChevronRight, ArrowRight, Check, Dumbbell, Flame, Heart, Percent } from 'lucide-react';
|
||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
||
|
|
|
||
|
|
interface CalculatorsModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
type ToolType = 'bmi' | 'water' | 'bmr' | 'tdee' | 'orm' | 'bodyfat' | 'hr';
|
||
|
|
|
||
|
|
const CalculatorsModal: React.FC<CalculatorsModalProps> = ({ isOpen, onClose }) => {
|
||
|
|
const [activeTool, setActiveTool] = useState<ToolType>('bmi');
|
||
|
|
const { t } = useLanguage();
|
||
|
|
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AnimatePresence>
|
||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
|
||
|
|
{/* Backdrop Overlay */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
exit={{ opacity: 0 }}
|
||
|
|
onClick={onClose}
|
||
|
|
className="absolute inset-0 bg-gray-950/70 backdrop-blur-md"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Modal Container */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||
|
|
className="relative bg-white w-full max-w-6xl h-[600px] md:h-[750px] max-h-[95vh] rounded-3xl shadow-2xl overflow-hidden flex flex-col md:flex-row ring-1 ring-gray-200"
|
||
|
|
>
|
||
|
|
{/* Close Button (Mobile) */}
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="md:hidden absolute top-4 right-4 z-20 p-2 bg-gray-100 rounded-full text-gray-500 hover:text-gray-900"
|
||
|
|
>
|
||
|
|
<X size={20} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Sidebar Navigation */}
|
||
|
|
<aside className="w-full md:w-80 bg-gray-50 border-b md:border-b-0 md:border-r border-gray-200 flex flex-col shrink-0">
|
||
|
|
<div className="p-4 md:p-6 border-b border-gray-100/50">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="bg-brand-600 p-2 rounded-lg text-white shadow-lg shadow-brand-500/20">
|
||
|
|
<Calculator size={20} />
|
||
|
|
</div>
|
||
|
|
<span className="font-bold text-lg text-gray-900 tracking-tight">FoodSnap Tools</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="flex-1 overflow-y-auto p-4 md:p-4 space-y-1 scrollbar-thin scrollbar-thumb-gray-200 flex flex-row md:flex-col gap-2 md:gap-1 overflow-x-auto md:overflow-x-visible pb-4 md:pb-0">
|
||
|
|
<NavButton
|
||
|
|
active={activeTool === 'bmi'}
|
||
|
|
onClick={() => setActiveTool('bmi')}
|
||
|
|
icon={<Scale size={18} />}
|
||
|
|
label={t.tools.bmi.title}
|
||
|
|
desc="Índice de Massa Corporal"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTool === 'tdee'}
|
||
|
|
onClick={() => setActiveTool('tdee')}
|
||
|
|
icon={<Flame size={18} />}
|
||
|
|
label={t.tools.tdee.title}
|
||
|
|
desc="Gasto Total Diário"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTool === 'water'}
|
||
|
|
onClick={() => setActiveTool('water')}
|
||
|
|
icon={<Droplets size={18} />}
|
||
|
|
label={t.tools.water.title}
|
||
|
|
desc="Hidratação Diária"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTool === 'bmr'}
|
||
|
|
onClick={() => setActiveTool('bmr')}
|
||
|
|
icon={<Activity size={18} />}
|
||
|
|
label={t.tools.bmr.title}
|
||
|
|
desc="Taxa Metabólica Basal"
|
||
|
|
/>
|
||
|
|
<div className="hidden md:block h-px bg-gray-200 my-2 mx-4"></div>
|
||
|
|
<NavButton
|
||
|
|
active={activeTool === 'orm'}
|
||
|
|
onClick={() => setActiveTool('orm')}
|
||
|
|
icon={<Dumbbell size={18} />}
|
||
|
|
label={t.tools.orm.title}
|
||
|
|
desc="Força Máxima (1RM)"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTool === 'bodyfat'}
|
||
|
|
onClick={() => setActiveTool('bodyfat')}
|
||
|
|
icon={<Percent size={18} />}
|
||
|
|
label={t.tools.bodyfat.title}
|
||
|
|
desc="Gordura Corporal"
|
||
|
|
/>
|
||
|
|
<NavButton
|
||
|
|
active={activeTool === 'hr'}
|
||
|
|
onClick={() => setActiveTool('hr')}
|
||
|
|
icon={<Heart size={18} />}
|
||
|
|
label={t.tools.hr.title}
|
||
|
|
desc="Zonas Cardíacas"
|
||
|
|
/>
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
{/* Main Content Area */}
|
||
|
|
<main className="flex-1 relative overflow-y-auto bg-white">
|
||
|
|
{/* Close Button (Desktop) */}
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="hidden md:block absolute top-6 right-6 p-2 text-gray-400 hover:text-gray-900 transition-colors bg-white hover:bg-gray-100 rounded-full z-10"
|
||
|
|
>
|
||
|
|
<X size={24} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className="p-6 md:p-10 max-w-3xl mx-auto h-full flex flex-col justify-center min-h-[500px]">
|
||
|
|
<AnimatePresence mode="wait">
|
||
|
|
<motion.div
|
||
|
|
key={activeTool}
|
||
|
|
initial={{ opacity: 0, x: 20 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
exit={{ opacity: 0, x: -20 }}
|
||
|
|
transition={{ duration: 0.3 }}
|
||
|
|
className="w-full"
|
||
|
|
>
|
||
|
|
{activeTool === 'bmi' && <BMICalculator t={t} />}
|
||
|
|
{activeTool === 'water' && <WaterCalculator t={t} />}
|
||
|
|
{activeTool === 'bmr' && <BMRCalculator t={t} />}
|
||
|
|
{activeTool === 'tdee' && <TDEECalculator t={t} />}
|
||
|
|
{activeTool === 'orm' && <ORMCalculator t={t} />}
|
||
|
|
{activeTool === 'bodyfat' && <BodyFatCalculator t={t} />}
|
||
|
|
{activeTool === 'hr' && <HeartRateCalculator t={t} />}
|
||
|
|
</motion.div>
|
||
|
|
</AnimatePresence>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// --- Components de Navegação ---
|
||
|
|
|
||
|
|
const NavButton = ({ active, onClick, icon, label, desc }: any) => (
|
||
|
|
<button
|
||
|
|
onClick={onClick}
|
||
|
|
className={`flex items-center gap-3 p-3 md:p-3.5 rounded-xl transition-all duration-200 w-full text-left min-w-[200px] md:min-w-0 md:mb-1 ${active
|
||
|
|
? 'bg-white shadow-md shadow-gray-200 ring-1 ring-gray-200'
|
||
|
|
: 'hover:bg-gray-100 text-gray-500 hover:text-gray-900'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<div className={`p-2 rounded-lg transition-colors shrink-0 ${active ? 'bg-brand-50 text-brand-600' : 'bg-gray-200/50 text-gray-500'}`}>
|
||
|
|
{icon}
|
||
|
|
</div>
|
||
|
|
<div className="min-w-0">
|
||
|
|
<span className={`block text-sm font-bold truncate ${active ? 'text-gray-900' : 'text-gray-600'}`}>{label}</span>
|
||
|
|
<span className="hidden md:block text-[10px] text-gray-400 font-medium leading-tight truncate">{desc}</span>
|
||
|
|
</div>
|
||
|
|
{active && <div className="hidden md:block ml-auto w-1.5 h-1.5 rounded-full bg-brand-500 shrink-0"></div>}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
|
||
|
|
// --- Calculadoras (Existentes + Novas) ---
|
||
|
|
|
||
|
|
const BMICalculator = ({ t }: any) => {
|
||
|
|
const [weight, setWeight] = useState('');
|
||
|
|
const [height, setHeight] = useState('');
|
||
|
|
const [bmi, setBmi] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const calculate = () => {
|
||
|
|
if (weight && height) {
|
||
|
|
const h = parseFloat(height) / 100;
|
||
|
|
const val = parseFloat(weight) / (h * h);
|
||
|
|
setBmi(parseFloat(val.toFixed(1)));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getStatus = (val: number) => {
|
||
|
|
if (val < 18.5) return { label: 'Abaixo do peso', color: 'text-blue-500', bg: 'bg-blue-500', range: 0 };
|
||
|
|
if (val < 25) return { label: 'Peso ideal', color: 'text-green-500', bg: 'bg-green-500', range: 33 };
|
||
|
|
if (val < 30) return { label: 'Sobrepeso', color: 'text-yellow-500', bg: 'bg-yellow-500', range: 66 };
|
||
|
|
return { label: 'Obesidade', color: 'text-red-500', bg: 'bg-red-500', range: 100 };
|
||
|
|
};
|
||
|
|
|
||
|
|
const status = bmi ? getStatus(bmi) : null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-8">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">{t.tools.bmi.title}</h2>
|
||
|
|
<p className="text-gray-500">{t.tools.bmi.desc}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-6">
|
||
|
|
<BigInput label={t.tools.bmi.labelWeight} value={weight} onChange={setWeight} placeholder="70" unit="kg" />
|
||
|
|
<BigInput label={t.tools.bmi.labelHeight} value={height} onChange={setHeight} placeholder="175" unit="cm" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={calculate}
|
||
|
|
disabled={!weight || !height}
|
||
|
|
className="w-full bg-gray-900 hover:bg-black text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||
|
|
>
|
||
|
|
{t.tools.calculate} <ArrowRight size={18} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{bmi && status && (
|
||
|
|
<div className="bg-gray-50 rounded-2xl p-6 border border-gray-100 animate-in fade-in slide-in-from-bottom-4">
|
||
|
|
<div className="text-center mb-6">
|
||
|
|
<p className="text-sm text-gray-500 font-medium uppercase tracking-wide mb-1">Seu Resultado</p>
|
||
|
|
<div className="text-5xl font-extrabold text-gray-900 mb-2">{bmi}</div>
|
||
|
|
<span className={`inline-block px-3 py-1 rounded-full text-sm font-bold bg-white shadow-sm border border-gray-100 ${status.color}`}>
|
||
|
|
{status.label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Visual Bar */}
|
||
|
|
<div className="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-2">
|
||
|
|
<div className="absolute inset-y-0 left-0 w-1/4 bg-blue-400"></div>
|
||
|
|
<div className="absolute inset-y-0 left-1/4 w-1/4 bg-green-400"></div>
|
||
|
|
<div className="absolute inset-y-0 left-2/4 w-1/4 bg-yellow-400"></div>
|
||
|
|
<div className="absolute inset-y-0 left-3/4 w-1/4 bg-red-400"></div>
|
||
|
|
</div>
|
||
|
|
<div className="relative h-4 w-full">
|
||
|
|
<div
|
||
|
|
className="absolute top-0 -translate-x-1/2 transition-all duration-500"
|
||
|
|
style={{ left: `${Math.min(Math.max((bmi / 40) * 100, 5), 95)}%` }}
|
||
|
|
>
|
||
|
|
<div className="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[8px] border-b-gray-800 mx-auto"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between text-[10px] text-gray-400 font-medium mt-1">
|
||
|
|
<span>18.5</span>
|
||
|
|
<span>25.0</span>
|
||
|
|
<span>30.0</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const WaterCalculator = ({ t }: any) => {
|
||
|
|
const [weight, setWeight] = useState('');
|
||
|
|
const [liters, setLiters] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const calculate = () => {
|
||
|
|
if (weight) {
|
||
|
|
const val = parseFloat(weight) * 0.035;
|
||
|
|
setLiters(parseFloat(val.toFixed(1)));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-8">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 text-cyan-900">{t.tools.water.title}</h2>
|
||
|
|
<p className="text-gray-500">{t.tools.water.desc}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-8">
|
||
|
|
<div className="flex-1 space-y-6">
|
||
|
|
<BigInput label={t.tools.bmi.labelWeight} value={weight} onChange={setWeight} placeholder="70" unit="kg" />
|
||
|
|
<button
|
||
|
|
onClick={calculate}
|
||
|
|
disabled={!weight}
|
||
|
|
className="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||
|
|
>
|
||
|
|
{t.tools.calculate} <ArrowRight size={18} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Visual Bottle */}
|
||
|
|
<div className="hidden md:flex w-32 h-64 bg-gray-100 rounded-[2rem] border-4 border-gray-200 relative overflow-hidden items-end justify-center shrink-0">
|
||
|
|
<div
|
||
|
|
className="absolute bottom-0 left-0 right-0 bg-cyan-400 transition-all duration-700 ease-out opacity-80"
|
||
|
|
style={{ height: liters ? '70%' : '10%' }}
|
||
|
|
>
|
||
|
|
<div className="w-full absolute -top-4 left-0 h-8 bg-cyan-400 rounded-[100%]"></div>
|
||
|
|
</div>
|
||
|
|
<div className="relative z-10 mb-8 text-center">
|
||
|
|
<Droplets className="text-white drop-shadow-md mx-auto mb-2" size={24} />
|
||
|
|
{liters && <span className="text-white font-bold text-xl drop-shadow-md">{liters}L</span>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{liters && (
|
||
|
|
<div className="md:hidden bg-cyan-50 border border-cyan-100 p-6 rounded-2xl text-center">
|
||
|
|
<p className="text-sm text-cyan-800 font-medium uppercase tracking-wide mb-1">Meta Diária</p>
|
||
|
|
<p className="text-5xl font-extrabold text-cyan-600">{liters} L</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const BMRCalculator = ({ t }: any) => {
|
||
|
|
const [gender, setGender] = useState<'male' | 'female'>('male');
|
||
|
|
const [weight, setWeight] = useState('');
|
||
|
|
const [height, setHeight] = useState('');
|
||
|
|
const [age, setAge] = useState('');
|
||
|
|
const [bmr, setBmr] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const calculate = () => {
|
||
|
|
if (weight && height && age) {
|
||
|
|
let val = (10 * parseFloat(weight)) + (6.25 * parseFloat(height)) - (5 * parseFloat(age));
|
||
|
|
val = gender === 'male' ? val + 5 : val - 161;
|
||
|
|
setBmr(Math.round(val));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">{t.tools.bmr.title}</h2>
|
||
|
|
<p className="text-gray-500">{t.tools.bmr.desc}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<button onClick={() => setGender('male')} className={`p-4 rounded-xl border-2 transition-all flex flex-col items-center gap-2 ${gender === 'male' ? 'border-brand-500 bg-brand-50 text-brand-700' : 'border-gray-200 bg-white text-gray-400 hover:border-gray-300'}`}>
|
||
|
|
<div className="font-bold">{t.tools.bmr.male}</div>
|
||
|
|
{gender === 'male' && <div className="p-1 bg-brand-500 rounded-full text-white"><Check size={12} /></div>}
|
||
|
|
</button>
|
||
|
|
<button onClick={() => setGender('female')} className={`p-4 rounded-xl border-2 transition-all flex flex-col items-center gap-2 ${gender === 'female' ? 'border-brand-500 bg-brand-50 text-brand-700' : 'border-gray-200 bg-white text-gray-400 hover:border-gray-300'}`}>
|
||
|
|
<div className="font-bold">{t.tools.bmr.female}</div>
|
||
|
|
{gender === 'female' && <div className="p-1 bg-brand-500 rounded-full text-white"><Check size={12} /></div>}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-3 gap-4">
|
||
|
|
<BigInput label={t.tools.bmi.labelWeight} value={weight} onChange={setWeight} placeholder="70" unit="kg" />
|
||
|
|
<BigInput label={t.tools.bmi.labelHeight} value={height} onChange={setHeight} placeholder="175" unit="cm" />
|
||
|
|
<BigInput label={t.tools.bmr.labelAge} value={age} onChange={setAge} placeholder="30" unit="anos" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={calculate}
|
||
|
|
disabled={!weight || !height || !age}
|
||
|
|
className="w-full bg-gray-900 hover:bg-black text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||
|
|
>
|
||
|
|
{t.tools.calculate} <ArrowRight size={18} />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{bmr && (
|
||
|
|
<div className="bg-orange-50 border border-orange-100 p-6 rounded-2xl flex items-center justify-between animate-in fade-in zoom-in">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-orange-800 font-medium uppercase tracking-wide mb-1">Gasto em Repouso</p>
|
||
|
|
<p className="text-xs text-orange-600/70 max-w-[200px]">Calorias que você queima parado.</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-right">
|
||
|
|
<p className="text-4xl font-extrabold text-orange-600">{bmr}</p>
|
||
|
|
<p className="text-xs font-bold text-orange-400 uppercase">kcal / dia</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const TDEECalculator = ({ t }: any) => {
|
||
|
|
const [gender, setGender] = useState<'male' | 'female'>('male');
|
||
|
|
const [weight, setWeight] = useState('');
|
||
|
|
const [height, setHeight] = useState('');
|
||
|
|
const [age, setAge] = useState('');
|
||
|
|
const [activity, setActivity] = useState<number>(1.2);
|
||
|
|
const [tdee, setTdee] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const calculate = () => {
|
||
|
|
if (weight && height && age) {
|
||
|
|
let bmr = (10 * parseFloat(weight)) + (6.25 * parseFloat(height)) - (5 * parseFloat(age));
|
||
|
|
bmr = gender === 'male' ? bmr + 5 : bmr - 161;
|
||
|
|
setTdee(Math.round(bmr * activity));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const activityLevels = [
|
||
|
|
{ val: 1.2, label: t.tools.tdee.sedentary },
|
||
|
|
{ val: 1.375, label: t.tools.tdee.light },
|
||
|
|
{ val: 1.55, label: t.tools.tdee.moderate },
|
||
|
|
{ val: 1.725, label: t.tools.tdee.active },
|
||
|
|
{ val: 1.9, label: t.tools.tdee.veryActive },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">{t.tools.tdee.title}</h2>
|
||
|
|
<p className="text-gray-500">{t.tools.tdee.desc}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<button onClick={() => setGender('male')} className={`p-3 rounded-xl border-2 transition-all flex justify-center items-center gap-2 ${gender === 'male' ? 'border-brand-500 bg-brand-50 text-brand-700' : 'border-gray-200 bg-white text-gray-400'}`}>{t.tools.bmr.male}</button>
|
||
|
|
<button onClick={() => setGender('female')} className={`p-3 rounded-xl border-2 transition-all flex justify-center items-center gap-2 ${gender === 'female' ? 'border-brand-500 bg-brand-50 text-brand-700' : 'border-gray-200 bg-white text-gray-400'}`}>{t.tools.bmr.female}</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-3 gap-4">
|
||
|
|
<BigInput label={t.tools.bmi.labelWeight} value={weight} onChange={setWeight} placeholder="70" unit="kg" />
|
||
|
|
<BigInput label={t.tools.bmi.labelHeight} value={height} onChange={setHeight} placeholder="175" unit="cm" />
|
||
|
|
<BigInput label={t.tools.bmr.labelAge} value={age} onChange={setAge} placeholder="30" unit="anos" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-gray-500 mb-2 uppercase tracking-wide">{t.tools.tdee.activity}</label>
|
||
|
|
<div className="grid grid-cols-1 gap-2">
|
||
|
|
{activityLevels.map((lvl) => (
|
||
|
|
<button
|
||
|
|
key={lvl.val}
|
||
|
|
onClick={() => setActivity(lvl.val)}
|
||
|
|
className={`text-left px-4 py-3 rounded-xl border transition-all flex justify-between items-center ${activity === lvl.val ? 'border-brand-500 bg-brand-50 text-brand-900 ring-1 ring-brand-500' : 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50'}`}
|
||
|
|
>
|
||
|
|
<span className="font-medium text-sm">{lvl.label}</span>
|
||
|
|
{activity === lvl.val && <div className="w-2 h-2 rounded-full bg-brand-500"></div>}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={calculate}
|
||
|
|
disabled={!weight || !height || !age}
|
||
|
|
className="w-full bg-gray-900 hover:bg-black text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{t.tools.calculate}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{tdee && (
|
||
|
|
<div className="bg-brand-900 text-white p-6 rounded-2xl flex items-center justify-between animate-in fade-in zoom-in shadow-xl">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm text-brand-300 font-bold uppercase tracking-wide mb-1">Gasto Calórico Total</p>
|
||
|
|
<p className="text-xs text-brand-200 opacity-80 max-w-[200px]">Energia necessária para manter seu peso atual.</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-right">
|
||
|
|
<p className="text-4xl font-extrabold text-white">{tdee}</p>
|
||
|
|
<p className="text-xs font-bold text-brand-400 uppercase">kcal / dia</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const ORMCalculator = ({ t }: any) => {
|
||
|
|
const [lift, setLift] = useState('');
|
||
|
|
const [reps, setReps] = useState('');
|
||
|
|
const [orm, setOrm] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const calculate = () => {
|
||
|
|
if (lift && reps) {
|
||
|
|
// Epley Formula
|
||
|
|
const w = parseFloat(lift);
|
||
|
|
const r = parseFloat(reps);
|
||
|
|
if (r === 1) {
|
||
|
|
setOrm(w);
|
||
|
|
} else {
|
||
|
|
const val = w * (1 + r / 30);
|
||
|
|
setOrm(Math.round(val));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-8">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">{t.tools.orm.title}</h2>
|
||
|
|
<p className="text-gray-500">{t.tools.orm.desc}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-6">
|
||
|
|
<BigInput label={t.tools.orm.lift} value={lift} onChange={setLift} placeholder="100" unit="kg" />
|
||
|
|
<BigInput label={t.tools.orm.reps} value={reps} onChange={setReps} placeholder="5" unit="reps" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={calculate}
|
||
|
|
disabled={!lift || !reps}
|
||
|
|
className="w-full bg-gray-900 hover:bg-black text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{t.tools.calculate} <ArrowRight size={18} className="inline ml-2" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{orm && (
|
||
|
|
<div className="bg-gray-100 p-6 rounded-2xl animate-in fade-in slide-in-from-bottom-2">
|
||
|
|
<div className="flex justify-between items-center mb-4">
|
||
|
|
<span className="text-gray-500 font-bold uppercase text-xs">Sua Força Máxima Estimada</span>
|
||
|
|
<Dumbbell className="text-gray-400" size={20} />
|
||
|
|
</div>
|
||
|
|
<div className="text-center py-4">
|
||
|
|
<span className="text-6xl font-black text-gray-900 tracking-tighter">{orm}</span>
|
||
|
|
<span className="text-2xl text-gray-400 font-bold ml-2">kg</span>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-3 gap-2 mt-4 text-center">
|
||
|
|
<div className="bg-white p-2 rounded-lg shadow-sm">
|
||
|
|
<span className="block text-xs text-gray-400 font-bold">90%</span>
|
||
|
|
<span className="block font-bold text-gray-800">{Math.round(orm * 0.9)}kg</span>
|
||
|
|
</div>
|
||
|
|
<div className="bg-white p-2 rounded-lg shadow-sm">
|
||
|
|
<span className="block text-xs text-gray-400 font-bold">70% (Hipertrofia)</span>
|
||
|
|
<span className="block font-bold text-gray-800">{Math.round(orm * 0.7)}kg</span>
|
||
|
|
</div>
|
||
|
|
<div className="bg-white p-2 rounded-lg shadow-sm">
|
||
|
|
<span className="block text-xs text-gray-400 font-bold">50%</span>
|
||
|
|
<span className="block font-bold text-gray-800">{Math.round(orm * 0.5)}kg</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const BodyFatCalculator = ({ t }: any) => {
|
||
|
|
const [gender, setGender] = useState<'male' | 'female'>('male');
|
||
|
|
const [waist, setWaist] = useState('');
|
||
|
|
const [neck, setNeck] = useState('');
|
||
|
|
const [hip, setHip] = useState('');
|
||
|
|
const [height, setHeight] = useState('');
|
||
|
|
const [bf, setBf] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const calculate = () => {
|
||
|
|
// US Navy Method
|
||
|
|
const h = parseFloat(height);
|
||
|
|
const w = parseFloat(waist);
|
||
|
|
const n = parseFloat(neck);
|
||
|
|
|
||
|
|
if (gender === 'male' && h && w && n) {
|
||
|
|
const res = 495 / (1.0324 - 0.19077 * Math.log10(w - n) + 0.15456 * Math.log10(h)) - 450;
|
||
|
|
setBf(parseFloat(res.toFixed(1)));
|
||
|
|
} else if (gender === 'female' && h && w && n && hip) {
|
||
|
|
const hi = parseFloat(hip);
|
||
|
|
const res = 495 / (1.29579 - 0.35004 * Math.log10(w + hi - n) + 0.22100 * Math.log10(h)) - 450;
|
||
|
|
setBf(parseFloat(res.toFixed(1)));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">{t.tools.bodyfat.title}</h2>
|
||
|
|
<p className="text-gray-500">{t.tools.bodyfat.desc}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex gap-4 mb-4">
|
||
|
|
<button onClick={() => setGender('male')} className={`flex-1 p-3 rounded-xl border-2 transition-all font-bold ${gender === 'male' ? 'border-brand-500 bg-brand-50 text-brand-700' : 'border-gray-200'}`}>{t.tools.bmr.male}</button>
|
||
|
|
<button onClick={() => setGender('female')} className={`flex-1 p-3 rounded-xl border-2 transition-all font-bold ${gender === 'female' ? 'border-brand-500 bg-brand-50 text-brand-700' : 'border-gray-200'}`}>{t.tools.bmr.female}</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<BigInput label={t.tools.bmi.labelHeight} value={height} onChange={setHeight} placeholder="175" unit="cm" />
|
||
|
|
<BigInput label={t.tools.bodyfat.neck} value={neck} onChange={setNeck} placeholder="40" unit="cm" />
|
||
|
|
<BigInput label={t.tools.bodyfat.waist} value={waist} onChange={setWaist} placeholder="90" unit="cm" />
|
||
|
|
{gender === 'female' && (
|
||
|
|
<BigInput label={t.tools.bodyfat.hip} value={hip} onChange={setHip} placeholder="100" unit="cm" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={calculate}
|
||
|
|
disabled={!height || !neck || !waist || (gender === 'female' && !hip)}
|
||
|
|
className="w-full bg-brand-600 hover:bg-brand-700 text-white font-bold py-4 rounded-xl transition-all shadow-lg"
|
||
|
|
>
|
||
|
|
{t.tools.calculate}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{bf && (
|
||
|
|
<div className="bg-brand-50 border border-brand-100 p-8 rounded-2xl text-center animate-in fade-in zoom-in">
|
||
|
|
<p className="text-sm text-brand-800 font-bold uppercase tracking-wide mb-2">Gordura Corporal Estimada</p>
|
||
|
|
<p className="text-6xl font-black text-brand-600">{bf}<span className="text-3xl">%</span></p>
|
||
|
|
<div className="mt-4 text-xs text-brand-500 font-medium bg-brand-100 inline-block px-3 py-1 rounded-full">
|
||
|
|
Método US Navy
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const HeartRateCalculator = ({ t }: any) => {
|
||
|
|
const [age, setAge] = useState('');
|
||
|
|
const [maxHr, setMaxHr] = useState<number | null>(null);
|
||
|
|
|
||
|
|
const calculate = () => {
|
||
|
|
if (age) {
|
||
|
|
const val = 220 - parseFloat(age);
|
||
|
|
setMaxHr(val);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-8">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900">{t.tools.hr.title}</h2>
|
||
|
|
<p className="text-gray-500">{t.tools.hr.desc}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="max-w-xs">
|
||
|
|
<BigInput label={t.tools.bmr.labelAge} value={age} onChange={setAge} placeholder="30" unit="anos" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onClick={calculate} disabled={!age} className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-red-500/30">
|
||
|
|
{t.tools.calculate}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{maxHr && (
|
||
|
|
<div className="space-y-4 animate-in fade-in slide-in-from-bottom-2">
|
||
|
|
<div className="text-center mb-6">
|
||
|
|
<span className="text-sm font-bold text-gray-400 uppercase">Frequência Máxima Teórica</span>
|
||
|
|
<div className="text-5xl font-black text-gray-900">{maxHr} <span className="text-xl font-medium text-gray-400">bpm</span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<ZoneBar zone="5" color="bg-red-500" range="90-100%" val={`${Math.round(maxHr * 0.9)} - ${maxHr}`} label="Performance Máxima" />
|
||
|
|
<ZoneBar zone="4" color="bg-orange-500" range="80-90%" val={`${Math.round(maxHr * 0.8)} - ${Math.round(maxHr * 0.9)}`} label="Cardio Intenso" />
|
||
|
|
<ZoneBar zone="3" color="bg-green-500" range="70-80%" val={`${Math.round(maxHr * 0.7)} - ${Math.round(maxHr * 0.8)}`} label="Aeróbico (Queima)" />
|
||
|
|
<ZoneBar zone="2" color="bg-blue-500" range="60-70%" val={`${Math.round(maxHr * 0.6)} - ${Math.round(maxHr * 0.7)}`} label="Queima de Gordura / Aquecimento" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const ZoneBar = ({ zone, color, range, val, label }: any) => (
|
||
|
|
<div className="bg-gray-50 p-3 rounded-xl border border-gray-100 flex items-center gap-4">
|
||
|
|
<div className={`w-10 h-10 rounded-lg ${color} flex items-center justify-center text-white font-bold shrink-0`}>Z{zone}</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex justify-between items-center mb-1">
|
||
|
|
<span className="font-bold text-gray-800 text-sm">{label}</span>
|
||
|
|
<span className="text-xs font-bold text-gray-400">{range}</span>
|
||
|
|
</div>
|
||
|
|
<div className="text-sm font-medium text-gray-600">{val} bpm</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
const BigInput = ({ label, value, onChange, placeholder, unit }: any) => (
|
||
|
|
<div className="w-full">
|
||
|
|
<label className="block text-xs font-bold text-gray-500 mb-2 uppercase tracking-wide">{label}</label>
|
||
|
|
<div className="relative">
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
value={value}
|
||
|
|
onChange={(e) => onChange(e.target.value)}
|
||
|
|
className="w-full px-4 py-4 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 font-bold text-lg focus:border-brand-500 focus:ring-2 focus:ring-brand-200 outline-none transition-all placeholder-gray-300"
|
||
|
|
placeholder={placeholder}
|
||
|
|
/>
|
||
|
|
{unit && <span className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium text-sm">{unit}</span>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
export default CalculatorsModal;
|