gistfile1.tsx

import { Box, Button, Center, Input, Title } from "@mantine/core";
import React, { useState } from "react";
 
const IndexPage = () => {
 const [newTodo, setNewTodo] = useState("");
 const [todos, setTodos] = useState<string[]>([]);
 
 return (
   <Center style={{ flexDirection: "column", padding: 10 }}>
     <Title>Next.js + Serve todo app</Title>
     <Center style={{ gap: 5, marginTop: 10 }}>
       <Input.Wrapper label="New task">
         <Input
           onChange={(e) => setNewTodo(e.currentTarget.value)}
           style={{ width: "300px" }}
           placeholder="e.g. Send email to my boss"
         />
       </Input.Wrapper>
       <Button
         onClick={async () => {
           const upload = await fetch(`/api/todos`, {
             method: "POST",
             body: JSON.stringify({ todo: newTodo }),
           });
           if (!upload.ok) alert("Error adding todo");
           else setTodos([...todos, newTodo]);
         }}
         mt="auto"
       >
         Create new todo
       </Button>
     </Center>
 
     <Box>
       <Title>Todo</Title>
       {todos.map((todo, i) => (
         <Center
           sx={(theme) => ({
             padding: 10,
             marginTop: 10,
             background: theme.colors.gray[2],
             justifyContent: "space-between",
             gap: 10,
           })}
           key={i}
         >
           {todo}
           <Center
             sx={{
               width: "25px",
               height: "25px",
               borderRadius: "100%",
               background: "red",
             }}
           >
             -
           </Center>
         </Center>
       ))}
     </Box>
   </Center>
 );
};
 
export default IndexPage;