diff --git a/my-react-app/src/components/button/index.tsx b/my-react-app/src/components/button/index.tsx index 74e3d9a..97c859b 100644 --- a/my-react-app/src/components/button/index.tsx +++ b/my-react-app/src/components/button/index.tsx @@ -6,7 +6,6 @@ type Props = TouchableOpacityProps & { } export function Button({ title, ...rest }: Props){ - //...rest está pegando o resto das propriedades que vieram do TouchableOpacityProps seem serem explicitadas. return ( diff --git a/onebithealth/src/app/index.tsx b/onebithealth/src/app/index.tsx index 94b8f8c..75c6ac0 100644 --- a/onebithealth/src/app/index.tsx +++ b/onebithealth/src/app/index.tsx @@ -1,12 +1,15 @@ -import { View, StyleSheet } from "react-native"; +import React from "react"; +import { View, StyleSheet, StatusBar } from "react-native"; import Title from "@/components/Title"; -import Main from "@/components/Main"; +import Form from "@/components/Form"; export default function Index() { return ( + + - <Main /> + <Form /> </View> ); } @@ -14,14 +17,6 @@ export default function Index() { const styles = StyleSheet.create({ container: { flex: 1, - padding: 32, - justifyContent: "center", - alignItems: "center", - gap: 16, + backgroundColor: "#fffdfdff" }, - title: { - color: "#33556bff", - fontSize: 24, - fontWeight: "bold", - }, -}); +}); \ No newline at end of file diff --git a/onebithealth/src/components/Button/index.tsx b/onebithealth/src/components/Button/index.tsx new file mode 100644 index 0000000..fcb4f7f --- /dev/null +++ b/onebithealth/src/components/Button/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { TouchableOpacity, Text, TouchableOpacityProps } from 'react-native'; +import { styles } from './styles'; + +interface Props extends TouchableOpacityProps { + title: string; +} + +export default function Button({ title, ...rest }: Props) { + return ( + <TouchableOpacity + style={styles.button} + activeOpacity={0.7} // Efeito visual de clique + {...rest} + > + <Text style={styles.title}>{title}</Text> + </TouchableOpacity> + ); +} \ No newline at end of file diff --git a/onebithealth/src/components/Button/styles.ts b/onebithealth/src/components/Button/styles.ts new file mode 100644 index 0000000..f212af7 --- /dev/null +++ b/onebithealth/src/components/Button/styles.ts @@ -0,0 +1,17 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + button: { + width: '100%', + height: 52, + backgroundColor: '#292929ff', + borderRadius: 25, + justifyContent: 'center', + alignItems: 'center' + }, + title: { + fontSize: 16, + fontWeight: 'bold', + color: '#FFFFFF' + } +}); \ No newline at end of file diff --git a/onebithealth/src/components/Form/ResultImc/index.tsx b/onebithealth/src/components/Form/ResultImc/index.tsx index 8f2577a..29bb4a0 100644 --- a/onebithealth/src/components/Form/ResultImc/index.tsx +++ b/onebithealth/src/components/Form/ResultImc/index.tsx @@ -6,7 +6,6 @@ interface ResultImcProps { messageResultImc: string; } -// Aplicamos a interface aqui export default function ResultImc(props: ResultImcProps) { return ( <View> diff --git a/onebithealth/src/components/Form/index.tsx b/onebithealth/src/components/Form/index.tsx index b41ca9e..55c1693 100644 --- a/onebithealth/src/components/Form/index.tsx +++ b/onebithealth/src/components/Form/index.tsx @@ -1,59 +1,113 @@ import React, { useState } from "react"; -import { View, Text, TextInput, Button, StyleSheet } from "react-native"; -import ResultImc from "@/components/Form/ResultImc"; +import { + View, + Text, + TextInput, + StyleSheet, + Pressable, + Keyboard +} from "react-native"; + +import ResultImc from "@/components/Form/ResultImc"; +import Button from "@/components/Button"; export default function Form() { const [height, setHeight] = useState(""); const [weight, setWeight] = useState(""); - const [messageImc, setMessageImc] = useState("Preencha o peso e altura"); + const [messageImc, setMessageImc] = useState(""); const [imc, setImc] = useState<number | null>(null); + const [textButton, setTextButton] = useState("Calcular"); + + function imcCalculator() { + let heightFormat = height.replace(",", "."); + let weightFormat = weight.replace(",", "."); + const totalImc = (parseFloat(weightFormat) / (parseFloat(heightFormat) * parseFloat(heightFormat))).toFixed(2); + setImc(parseFloat(totalImc)); + return totalImc; + } function validationImc() { if (weight !== "" && height !== "") { - const formattedHeight = parseFloat(height.replace(',', '.')); // faz com que 1,80 vire 1.80 - const formattedWeight = parseFloat(weight.replace(',', '.')); - - // Cálculo simples do IMC - const imcCalculator = formattedWeight / (formattedHeight * formattedHeight); - - setImc(parseFloat(imcCalculator.toFixed(2))); - setMessageImc("Seu IMC é igual a:"); + imcCalculator(); setHeight(""); setWeight(""); + setMessageImc("Seu IMC é igual a:"); + setTextButton("Calcular Novamente"); + Keyboard.dismiss(); } else { setImc(null); + setTextButton("Calcular"); setMessageImc("Preencha o peso e altura"); } } return ( - <View> - <View> - <Text>Altura:</Text> + <Pressable onPress={Keyboard.dismiss} style={styles.formContext}> + <View style={styles.form}> + + <Text style={styles.formLabel}>Altura</Text> <TextInput - placeholder="Ex.: 1.75" - keyboardType="numeric" + style={styles.input} onChangeText={setHeight} value={height} + placeholder="Ex. 1.75" + placeholderTextColor="#8D8D99" + keyboardType="numeric" /> - <Text>Peso:</Text> + <Text style={styles.formLabel}>Peso</Text> <TextInput - placeholder="Ex.: 75" - keyboardType="numeric" + style={styles.input} onChangeText={setWeight} value={weight} + placeholder="Ex. 75.36" + placeholderTextColor="#8D8D99" + keyboardType="numeric" /> - <Button - title="Calcular IMC" - onPress={() => validationImc()} - /> + <View style={styles.buttonCalculator}> + <Button title={textButton} onPress={() => validationImc()} /> + </View> + </View> - <ResultImc - messageResultImc={messageImc} - ResultImc={imc} - /> - </View> + + <ResultImc messageResultImc={messageImc} ResultImc={imc} /> + + </Pressable> ); -} \ No newline at end of file +} + +const styles = StyleSheet.create({ + formContext: { + flex: 1, + backgroundColor: "#ffffffff", + borderTopLeftRadius: 30, + borderTopRightRadius: 30, + alignItems: "center", + paddingTop: 30 + }, + form: { + width: "100%", + height: "auto", + padding: 10 + }, + formLabel: { + color: "#3d3d3dff", + fontSize: 18, + paddingLeft: 20 + }, + input: { + width: "90%", + borderRadius: 50, + backgroundColor: "#f7f7f7ff", + color: "#222222ff", + height: 50, + margin: 12, + paddingLeft: 20 + }, + buttonCalculator: { + paddingTop: 14, + marginLeft: 12, + marginRight: 12, + } +}); \ No newline at end of file diff --git a/onebithealth/src/components/Title/index.tsx b/onebithealth/src/components/Title/index.tsx index c7cdd51..95bbbde 100644 --- a/onebithealth/src/components/Title/index.tsx +++ b/onebithealth/src/components/Title/index.tsx @@ -1,10 +1,25 @@ -import react from "react"; -import { View, Text} from "react-native"; +import React from "react"; +import { View, Text, StyleSheet } from "react-native"; export default function Title() { - return ( - <View> - <Text>OneBitHealth</Text> - </View> - ); -} \ No newline at end of file + return ( + <View style={styles.boxTitle}> + <Text style={styles.textTitle}>ONEBITHEALTH</Text> + </View> + ); +} + +const styles = StyleSheet.create({ + boxTitle: { + alignItems: "center", + justifyContent: "center", + padding: 10, + marginBottom: 100 + }, + textTitle: { + color: "#252525ff", + fontSize: 32, + fontWeight: "bold", + textTransform: "uppercase" + }, +}); \ No newline at end of file