Conversor

import React, { useState, useEffect } from 'react'; import { Thermometer, Scale, Beaker, Ruler, Footprints, Shirt, Landmark } from 'lucide-react'; // --- URL do Logo --- const logoUrl = "http://googleusercontent.com/file_content/1"; // --- Funções de Conversão e Dados --- const round = (value) => { if (isNaN(value) || !isFinite(value)) return ''; // Arredonda para 3 casas decimais const factor = 1000; return Math.round((value + Number.EPSILON) * factor) / factor; }; const roundCurrency = (value) => { if (isNaN(value) || !isFinite(value)) return ''; // Arredonda para 2 casas decimais para moedas return Math.round((value + Number.EPSILON) * 100) / 100; } // Mapeamento de Tamanhos (não são fórmulas diretas) const shoeSizeMaps = { men: { br: ['37', '38', '39', '40', '41', '42', '43', '44'], us: ['6', '7', '8', '8.5', '9.5', '10', '11', '12'], eu: ['39', '40', '41', '42', '43', '44', '45', '46'], }, women: { br: ['34', '35', '36', '37', '38', '39', '40'], us: ['5', '6', '7', '8', '8.5', '9.5', '10.5'], eu: ['36', '37', '38', '39', '40', '41', '42'], } }; const clothingSizeMap = [ { br: 'PP', us: 'XS', eu: '34' }, { br: 'P', us: 'S', eu: '36/38' }, { br: 'M', us: 'M', eu: '40/42' }, { br: 'G', us: 'L', eu: '44/46' }, { br: 'GG', us: 'XL', eu: '48/50' }, ]; // Conversores Numéricos const tempConverters = { celsius: { fahrenheit: (c) => c * 9/5 + 32, kelvin: (c) => c + 273.15 }, fahrenheit: { celsius: (f) => (f - 32) * 5/9, kelvin: (f) => (f - 32) * 5/9 + 273.15 }, kelvin: { celsius: (k) => k - 273.15, fahrenheit: (k) => (k - 273.15) * 9/5 + 32 }, }; const weightConverters = { kilogram: { gram: (kg) => kg * 1000, pound: (kg) => kg * 2.20462, ounce: (kg) => kg * 35.274 }, gram: { kilogram: (g) => g / 1000 }, pound: { kilogram: (lb) => lb / 2.20462 }, ounce: { kilogram: (oz) => oz / 35.274 }, }; const volumeConverters = { liter: { milliliter: (l) => l * 1000, gallon: (l) => l * 0.264172 }, milliliter: { liter: (ml) => ml / 1000 }, gallon: { liter: (g) => g / 0.264172 }, }; const lengthConverters = { meter: { kilometer: (m) => m / 1000, mile: (m) => m * 0.000621371, foot: (m) => m * 3.28084 }, kilometer: { meter: (km) => km * 1000 }, mile: { meter: (mi) => mi / 0.000621371 }, foot: { meter: (ft) => ft / 3.28084 }, }; // --- Componentes da UI --- const ConversionCard = ({ title, icon, colorClass, children }) => (

{icon}

{title}

{children}

); const UnitInput = ({ label, unit, value, onChange, placeholder="0" }) => (

{label}

{unit}

); const SelectInput = ({ label, value, onChange, options }) => (

{label}

); // --- Componentes Conversores --- const TemperatureConverter = () => { const [temps, setTemps] = useState({ celsius: '', fahrenheit: '', kelvin: '' }); const handleChange = (fromUnit, value) => { const numValue = parseFloat(value); if (value === '') { setTemps({ celsius: '', fahrenheit: '', kelvin: '' }); return; } if (isNaN(numValue)) { setTemps(prev => ({...prev, [fromUnit]: value})); return; } const celsiusValue = fromUnit === 'celsius' ? numValue : tempConverters[fromUnit].celsius(numValue); const newTemps = { celsius: round(celsiusValue), fahrenheit: round(tempConverters.celsius.fahrenheit(celsiusValue)), kelvin: round(tempConverters.celsius.kelvin(celsiusValue)), }; newTemps[fromUnit] = value; setTemps(newTemps); }; return ( } colorClass="bg-red-100 border-red-200"> handleChange('celsius', e.target.value)} /> handleChange('fahrenheit', e.target.value)} /> handleChange('kelvin', e.target.value)} /> ); }; const WeightConverter = () => { const [weights, setWeights] = useState({ kilogram: '', gram: '', pound: '', ounce: '' }); const handleChange = (fromUnit, value) => { const numValue = parseFloat(value); if (value === '') { setWeights({ kilogram: '', gram: '', pound: '', ounce: '' }); return; } if (isNaN(numValue)) { setWeights(prev => ({...prev, [fromUnit]: value})); return; } const kgValue = fromUnit === 'kilogram' ? numValue : weightConverters[fromUnit].kilogram(numValue); const newWeights = { kilogram: round(kgValue), gram: round(weightConverters.kilogram.gram(kgValue)), pound: round(weightConverters.kilogram.pound(kgValue)), ounce: round(weightConverters.kilogram.ounce(kgValue)), }; newWeights[fromUnit] = value; setWeights(newWeights); }; return ( } colorClass="bg-green-100 border-green-200"> handleChange('kilogram', e.target.value)} /> handleChange('gram', e.target.value)} /> handleChange('pound', e.target.value)} /> handleChange('ounce', e.target.value)} /> ); }; const VolumeConverter = () => { const [volumes, setVolumes] = useState({ liter: '', milliliter: '', gallon: '' }); const handleChange = (fromUnit, value) => { const numValue = parseFloat(value); if (value === '') { setVolumes({ liter: '', milliliter: '', gallon: '' }); return; } if (isNaN(numValue)) { setVolumes(prev => ({...prev, [fromUnit]: value})); return; } const literValue = fromUnit === 'liter' ? numValue : volumeConverters[fromUnit].liter(numValue); const newVolumes = { liter: round(literValue), milliliter: round(volumeConverters.liter.milliliter(literValue)), gallon: round(volumeConverters.liter.gallon(literValue)), }; newVolumes[fromUnit] = value; setVolumes(newVolumes); }; return ( } colorClass="bg-blue-100 border-blue-200"> handleChange('liter', e.target.value)} /> handleChange('milliliter', e.target.value)} /> handleChange('gallon', e.target.value)} /> ); }; const LengthConverter = () => { const [lengths, setLengths] = useState({ meter: '', kilometer: '', mile: '', foot: '' }); const handleChange = (fromUnit, value) => { const numValue = parseFloat(value); if (value === '') { setLengths({ meter: '', kilometer: '', mile: '', foot: '' }); return; } if (isNaN(numValue)) { setLengths(prev => ({...prev, [fromUnit]: value})); return; } const meterValue = fromUnit === 'meter' ? numValue : lengthConverters[fromUnit].meter(numValue); const newLengths = { meter: round(meterValue), kilometer: round(lengthConverters.meter.kilometer(meterValue)), mile: round(lengthConverters.meter.mile(meterValue)), foot: round(lengthConverters.meter.foot(meterValue)), }; newLengths[fromUnit] = value; setLengths(newLengths); }; return ( } colorClass="bg-purple-100 border-purple-200"> handleChange('meter', e.target.value)} /> handleChange('kilometer', e.target.value)} /> handleChange('mile', e.target.value)} /> handleChange('foot', e.target.value)} /> ); }; const ShoeSizeConverter = () => { const [sizes, setSizes] = useState({ men: { br: '', us: '', eu: '' }, women: { br: '', us: '', eu: '' } }); const createHandleChange = (gender) => (fromSystem, value) => { if (value === '') { setSizes(prev => ({ ...prev, [gender]: { br: '', us: '', eu: '' } })); return; } const map = shoeSizeMaps[gender]; const index = map[fromSystem].indexOf(value); if (index === -1) { setSizes(prev => ({ ...prev, [gender]: { ...prev[gender], [fromSystem]: value } })); return; } const newSizes = { br: map.br[index], us: map.us[index], eu: map.eu[index] }; setSizes(prev => ({ ...prev, [gender]: newSizes })); }; return ( } colorClass="bg-orange-100 border-orange-200">

Masculino

createHandleChange('men')('br', e.target.value)} options={shoeSizeMaps.men.br} /> createHandleChange('men')('us', e.target.value)} options={shoeSizeMaps.men.us} /> createHandleChange('men')('eu', e.target.value)} options={shoeSizeMaps.men.eu} />

Feminino

createHandleChange('women')('br', e.target.value)} options={shoeSizeMaps.women.br} /> createHandleChange('women')('us', e.target.value)} options={shoeSizeMaps.women.us} /> createHandleChange('women')('eu', e.target.value)} options={shoeSizeMaps.women.eu} />

); }; const ClothingSizeConverter = () => { const [sizes, setSizes] = useState({ br: '', us: '', eu: '' }); const handleChange = (fromSystem, value) => { if (value === '') { setSizes({ br: '', us: '', eu: '' }); return; } const index = clothingSizeMap.findIndex(s => s[fromSystem] === value); if (index === -1) { setSizes(prev => ({ ...prev, [fromSystem]: value })); return; } setSizes(clothingSizeMap[index]); }; return ( } colorClass="bg-cyan-100 border-cyan-200">

handleChange('br', e.target.value)} options={clothingSizeMap.map(s => s.br)} /> handleChange('us', e.target.value)} options={clothingSizeMap.map(s => s.us)} /> handleChange('eu', e.target.value)} options={clothingSizeMap.map(s => s.eu)} />

); }; const CurrencyConverter = () => { const [amounts, setAmounts] = useState({ brl: '', usd: '', cad: '' }); const [rates, setRates] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('https://api.exchangerate-api.com/v4/latest/USD') .then(response => { if (!response.ok) { throw new Error('Falha na resposta da rede'); } return response.json(); }) .then(data => { setRates(data.rates); setLoading(false); }) .catch(err => { setError('Não foi possível carregar as taxas.'); setLoading(false); }); }, []); const handleChange = (fromCurrency, value) => { if (value === '') { setAmounts({ brl: '', usd: '', cad: '' }); return; } const numValue = parseFloat(value); if (isNaN(numValue) || !rates) { setAmounts(prev => ({ ...prev, [fromCurrency]: value })); return; } let usdValue; switch (fromCurrency) { case 'usd': usdValue = numValue; break; case 'brl': usdValue = numValue / rates.BRL; break; case 'cad': usdValue = numValue / rates.CAD; break; default: return; } const newAmounts = { usd: roundCurrency(usdValue), brl: roundCurrency(usdValue * rates.BRL), cad: roundCurrency(usdValue * rates.CAD), }; newAmounts[fromCurrency] = value; setAmounts(newAmounts); }; if (loading) { return ( } colorClass="bg-yellow-100 border-yellow-200">

Carregando taxas de câmbio...

); } if (error) { return ( } colorClass="bg-red-100 border-red-200">

{error}

); } return ( } colorClass="bg-yellow-100 border-yellow-200"> handleChange('brl', e.target.value)} /> handleChange('usd', e.target.value)} /> handleChange('cad', e.target.value)} /> ); }; // --- Componente Principal --- export default function App() { return (

Conversor de Unidades

Uma ferramenta rápida e fácil para suas conversões diárias.

Cortesia da Quer Viajar? Eu posso te ajudar

); }

Guia Completo 2017

Masculino

Feminino