feat: OndeBitHealth layout

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 (
         <TouchableOpacity activeOpacity={0.2} style={styles.button} {...rest}>
             <Text style={styles.title}>

onebithealth/src/app/index.tsx

@@ -1,27 +1,22 @@
-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 (
     <View style={styles.container}>
+      <StatusBar barStyle="light-content" backgroundColor="#292929" />
+
       <Title />
-      <Main />
+      <Form />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 32,
-    justifyContent: "center",
-    alignItems: "center",
-    gap: 16,
+    backgroundColor: "#fffdfdff"
   },
-  title: {
-    color: "#33556bff",
-    fontSize: 24,
-    fontWeight: "bold",
-  },
-});
+});

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>
+  );
+}

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'
+    } 
+});

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>

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>
   );
-}
+}
+
+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,
+  }
+});

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>
-    );
-}
+  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"
+  },
+});