Multiple Changes

src/view/Components/Taskview/Habitsview/HabitItem.tsx

@@ -0,0 +1,18 @@
+ import * as React from "react";
+
+function HabitItem(props: any) {
+    console.log("plus"+props.id)
+    return (
+        <div className="habit-item" id={props.id}>
+            <button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
+                +{props.upCount}
+            </button>
+            <p>{props.habit_text}</p>
+            <button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
+                -{props.downCount}
+            </button>
+        </div>
+    )
+}
+
+export default HabitItem

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import HabitItem from "./HabitItem"
+
+export default function Index(props: any){
+    if(props.habits == undefined) {
+        return (<div id="classDisplay">
+                    No habits present.
+                </div>)
+    }
+    else {
+        console.log("habits = " + props.habits);
+        const allHabits = props.habits.map((habit: any) => {
+            return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
+        })
+        const display = <div id="classDisplay">
+                            <ul>{allHabits}</ul>
+                        </div>
+
+        return(display);
+    }
+}
+

src/view/Components/Taskview/Habitsview/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/Habitsview/tabs.ts

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