Implementing First Widget Structure

src/Main.js

@@ -12,6 +12,7 @@ import Error from './pages/Error-Page'
 import './styles.css'
 
 
+
 export default function Main() {
     let Layout
     switch (window.location.pathname) {

src/pages/AddNewBill.css

@@ -0,0 +1,61 @@
+.add_bill_widget {
+    max-width: 20%;
+    background-color: rgb(223, 245, 229);
+    padding: 10px;
+}
+.widget_header {
+    margin:0px;
+    margin-bottom: 20px;
+    position: relative;
+}
+input {
+    max-width: 50%;
+}
+button {
+    margin-left: 20%;
+    margin-right: auto;
+}
+.buttons{
+    margin-top: 10px;
+}
+/* Style The Dropdown Button */
+.dropbtn {
+    cursor: pointer;
+  }
+  
+  /* The container <div> - needed to position the dropdown content */
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  /* Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  /* Links inside the dropdown */
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  /* Change color of dropdown links on hover */
+  .dropdown-content a:hover {background-color: #f1f1f1}
+  
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  /* Change the background color of the dropdown button when the dropdown content is shown */
+  .dropdown:hover .dropbtn {
+    background-color: #3e8e41;
+  }

src/pages/AddNewBill.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import './AddNewBill.css'
+
+export default function AddNewBill() {
+    return (
+        <>
+            <div class="add_bill_widget">
+                <h5 class="widget_header">Add New Bill</h5>
+                <input type="number"></input> 
+                <div class="buttons">
+                    <div class="dropdown">
+                        <button class="dropbtn">Categories</button>
+                        <div class="dropdown-content">
+                            <p>Bills</p>
+                            <p>Groceries</p>
+                            <p>Rent</p>
+                            <p>Leisure</p>
+                            <p>Gas</p>
+                        </div>
+                    
+                </div>
+                <button>Add Bill</button>  
+                </div>
+                
+            </div>
+        </>
+        
+    )
+}

src/pages/Dashboard.jsx

@@ -1,3 +1,12 @@
+ import AddNewBill from './AddNewBill'
+ 
  export default function Dashboard() {
-     return <h1>Dashboard</h1>
+
+    return (
+        <>
+            <h1>Dashboard</h1>
+            <AddNewBill />
+        </>
+        
+    )
  }