RENAN MARINHO SANTOS

src/App.tsx

@@ -1,31 +1,18 @@
-import { 
-  Center,
-  ChakraProvider,
-  Input,
-  Box,
-  Button
-} from '@chakra-ui/react'
-import { login } from './services/login';
+import { Box, Button } from "@chakra-ui/react";
+import Header from "./components/Header/Header";
+import { showWelcomeMessage } from "./components/messange";
+import LoginForm from "./components/Form";
 
-function App() {
+
+
+const HomePage: React.FC = () => {
   return (
-    <ChakraProvider>
-      <Box minHeight='100vh' backgroundColor='#9413dc' padding='25px'>
-        <Box backgroundColor='#FFFFFF' borderRadius='25px' padding='15px' >
-          <Center>
-            <h1>Faça o login</h1>
-          </Center>
-          <Input placeholder="email" />
-          <Input placeholder="password" />
-          <Center>
-            <Button onClick={login} colorScheme='teal' size='sm' width='100%' marginTop='5px'>
-              Button
-            </Button>
-          </Center>
-        </Box>
-      </Box>
-    </ChakraProvider>
+    <Box textAlign="center" p={4}>
+         <Header />
+         <LoginForm />
+         <Button onClick={showWelcomeMessage}>Login</Button>
+    </Box>
   );
-}
+};
 
-export default App;
+export default HomePage;

src/components/Form.tsx

@@ -0,0 +1,21 @@
+import { Box, Input, FormControl, FormLabel, Heading } from "@chakra-ui/react";
+
+const LoginForm: React.FC = () => {
+  return (
+    <Box borderWidth="1px" borderRadius="lg" p={6} width="300px" mx="auto">
+      <Heading as="h2" size="md" mb={4} textAlign="center">
+        Login
+      </Heading>
+      <FormControl id="email" mb={4}>
+        <FormLabel>Email</FormLabel>
+        <Input type="email" placeholder="Digite seu email" />
+      </FormControl>
+      <FormControl id="password" mb={6}>
+        <FormLabel>Senha</FormLabel>
+        <Input type="password" placeholder="Digite sua senha" />
+      </FormControl>
+    </Box>
+  );
+};
+
+export default LoginForm;

src/components/Header/Header.tsx

@@ -1,9 +1,13 @@
-import './Header.css'
+import { Box, Heading } from "@chakra-ui/react";
 
-export const Header  = () => {
-  return(
-    <div className='header'>
-      Dio Bank
-    </div>
-  )
-}
+const Header: React.FC = () => {
+  return (
+    <Box as="header" bg="teal.500" py={4} textAlign="center" >
+      <Heading as="h1" color="white">
+        Minha Aplicação
+      </Heading>
+    </Box>
+  );
+};
+
+export default Header;

src/components/button.tsx

@@ -0,0 +1,18 @@
+import { Button as ChakraButton } from "@chakra-ui/react";
+
+
+
+interface ButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, label }) => {
+  return (
+    <ChakraButton colorScheme="teal" onClick={onClick}>
+      {label}
+    </ChakraButton>
+  );
+};
+
+export default Button;

src/components/messange.tsx

@@ -0,0 +1,3 @@
+export const showWelcomeMessage = () => {
+    alert("Bem-vindo à aplicação!");
+  };