Currently, I am developing a to-do list application using React and Chakra UI.
I am trying to align the input field and the button on the same line for a more organized layout.
This is the current layout: image
I aim to achieve a design similar to this: image
Below are snippets of my code:
App.js:
import "./App.css";
import { ChakraProvider } from "@chakra-ui/react";
import Todo from "./components/Todo";
function App() {
return (
<ChakraProvider>
<div className="App">
<Todo />
</div>
</ChakraProvider>
);
}
export default App;
Todo.js:
import { Container, Box, Heading, Input, Button } from "@chakra-ui/react";
import { MdAdd } from "react-icons/md";
function Todo() {
return (
<Container
maxW="4xl"
minHeight="100vh"
display="flex"
alignItems="center"
justifyContent="center"
>
<Box
boxShadow="base"
rounded="lg"
padding={10}
background="white"
width="100%"
>
<Heading as="h1" size="md" textAlign="center">
To-Do List Application
</Heading>
<Box display="flex" alignItems="center" justifyContent="space-between">
<Input placeholder="Enter Task" marginTop={5} size="lg" />
<Button colorScheme="blue" rightIcon={<MdAdd />} margin={0}>
Add Task
</Button>
</Box>
</Box>
</Container>
);
}
export default Todo;