add new item form

src/AddNewItem.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { NewItemForm } from "./NewItemForm";
 import { AddItemButton } from "./styles";
 
 type AddNewItemProps = {
@@ -12,6 +13,14 @@ export const AddNewItem = (props: AddNewItemProps) => {
   const { onAdd, toggleButtonText, dark } = props;
 
   if (showForm) {
+    return (
+      <NewItemForm
+        onAdd={(text) => {
+          onAdd(text);
+          setShowForm(false);
+        }}
+      />
+    );
   }
 
   return (

src/NewItemForm.tsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+import { NewItemButton, NewItemFormContainer, NewItemInput } from "./styles";
+
+type NewItemFormProps = {
+  onAdd(text: string): void;
+};
+
+export const NewItemForm = ({ onAdd }: NewItemFormProps) => {
+  const [text, setText] = useState("");
+
+  return (
+    <NewItemFormContainer>
+      <NewItemInput value={text} onChange={(e) => setText(e.target.value)} />
+      <NewItemButton onClick={() => onAdd(text)}>Create</NewItemButton>
+    </NewItemFormContainer>
+  );
+};

src/styles.ts

@@ -48,9 +48,36 @@ export const AddItemButton = styled.button<AddItemButtonProps>`
   max-width: 300px;
   padding: 10px 12px;
   text-align: left;
-  transtion: background 85ms ease-in;
+  transition: background 85ms ease-in;
   width: 100%;
   &:hover {
     background-color: #ffffff52;
   }
 `;
+
+export const NewItemFormContainer = styled.div`
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-start;
+`;
+
+export const NewItemButton = styled.button`
+  background-color: #5aac44;
+  border-radius: 3px;
+  border: none;
+  box-shadow: none;
+  color: #fff;
+  padding: 6px 12px;
+  text-align: center;
+`;
+
+export const NewItemInput = styled.input`
+  border-radius: 3px;
+  border: none;
+  box-shadow: #091e4240 0 1px 0 0;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+`;