CSS and Tabs Added

view/Components/Taskview/index.tsx

@@ -1,9 +1,30 @@
 import * as React from "react";
 import TodoItem from "./TodoItem"
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 
 export default function Index(props: any){
-    const listItems = props.todos.map((todo: any) => {
+    const incompleteTodos = props.todos.map((todo: any) => {
+            if(!todo.completed)
+                return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
+    })
+    const completedTodos = props.todos.map((todo: any) => {
+        if(todo.completed)
             return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
     })
-    return(<ul>{listItems}</ul>);
+    const display = <div id="classDisplay">
+                        <Tabs>
+                        <TabList>
+                            <Tab>Active Todos</Tab>
+                            <Tab>Completed Todos</Tab>
+                        </TabList>
+                        <TabPanel>
+                            <ul>{incompleteTodos}</ul>
+                        </TabPanel>
+                        <TabPanel>
+                            <ul>{completedTodos}</ul>
+                        </TabPanel>
+                        </Tabs>
+                    </div>
+
+    return(display);
 }

view/Components/Taskview/react-tabs.css

@@ -0,0 +1,56 @@
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.react-tabs__tab--selected {
+  background: #fff;
+  border-color: #aaa;
+  color: black;
+  border-radius: 5px 5px 0 0;
+}
+
+.react-tabs__tab--disabled {
+  color: GrayText;
+  cursor: default;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 5px hsl(208, 99%, 50%);
+  border-color: hsl(208, 99%, 50%);
+  outline: none;
+}
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}

view/Components/Taskview/tabs.ts

@@ -0,0 +1 @@
+import * as React from "react"