Multiple Changes

src/view/Components/Taskview/Dailiesview/DailyItem.tsx

@@ -0,0 +1,12 @@
+ import * as React from "react";
+
+function DailyItem(props: any) {
+    return (
+        <div className="todo-item" id={props.id}>
+            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
+            <p>{props.daily_text}</p>
+        </div>
+    )
+}
+
+export default DailyItem

src/view/Components/Taskview/Dailiesview/index.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import DailyItem from "./DailyItem"
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+
+export default function Index(props: any){
+    if(props.dailys == undefined) {
+        return <div id="classDisplay">No Dailies Present</div>
+    }
+    else {
+        const incompleteDailies = props.dailys.map((daily: any) => {
+                if(!daily.completed)
+                    return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
+        })
+        const completedDailies = props.dailys.map((daily: any) => {
+            if(daily.completed)
+                return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
+        })
+        const display = <div id="classDisplay">
+                            <Tabs>
+                            <TabList>
+                                <Tab>Active</Tab>
+                                <Tab>Completed</Tab>
+                            </TabList>
+                            <TabPanel>
+                                <ul>{incompleteDailies}</ul>
+                            </TabPanel>
+                            <TabPanel>
+                                <ul>{completedDailies}</ul>
+                            </TabPanel>
+                            </Tabs>
+                        </div>
+        return(display);
+    }
+        
+}
+

src/view/Components/Taskview/Dailiesview/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;
+}

src/view/Components/Taskview/Dailiesview/tabs.ts

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