added addtodo component and style

eyekavya · Mar 22, 2023 · 75b946c · 75b946c
1 parent 7910343
commit 75b946c
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,19 @@
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -2,11 +2,13 @@ import "./App.css";
 
 import React from "react";
 import Heading from "./components/Heading/Heading";
+import AddTodo from "./components/AddTodo/AddTodo";
 
 function App() {
   return (
     <>
       <Heading />
+      <AddTodo />
     </>
   );
 }

diff --git a/src/components/AddTodo/AddTodo.js b/src/components/AddTodo/AddTodo.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { StyledAddTodo } from "./StyledAddTodo";
+
+function AddTodo() {
+  return (
+    <StyledAddTodo>
+      <div class="flex-basic">
+        <form>
+          <input type="text" class="todo-input" />
+          <button type="submit" class="todo-btn">
+            <i class="fas fa-plus-square"></i>
+          </button>
+        </form>
+      </div>
+    </StyledAddTodo>
+  );
+}
+
+export default AddTodo;
diff --git a/src/components/AddTodo/StyledAddTodo.js b/src/components/AddTodo/StyledAddTodo.js
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+export const StyledAddTodo = styled.section`
+  .flex-basic {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  form input,
+  form button {
+    padding: 0.5rem;
+    background-color: #fff;
+    font-size: 1.2rem;
+    border: none;
+    outline: none;
+  }
+
+  form button {
+    color: #d88771;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  form button:hover {
+    background-color: #d88771;
+    color: #fff;
+  }
+`;