CSS and Tabs Added

package.json

@@ -17,6 +17,7 @@
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "@types/react-tabs": "^2.3.3",
     "css-loader": "^6.4.0",
     "extract-text-webpack-plugin": "^2.1.2",
     "obsidian": "^0.12.0",
@@ -29,6 +30,7 @@
     "node": "^16.10.0",
     "node-fetch": "^3.0.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-tabs": "^3.2.2"
   }
 }

styles.css

@@ -1,18 +1,3 @@
-/* Empty. change later */
-
-.book {
-    border: 1px solid var(--background-modifier-border);
-    padding: 10px;
-  }
-  
-  .book__title {
-    font-weight: 600;
-  }
-  
-  .book__author {
-    color: var(--text-muted);
-  }
-
 .todo-item {
   display: flex;
   justify-content: flex-start;
@@ -23,7 +8,6 @@
   font-family: Roboto, sans-serif;
   font-weight: normal;
   font-size: 16px;
-  color: #ffffff;
 }
 
 input[type=checkbox] {
@@ -33,3 +17,65 @@ input[type=checkbox] {
 input[type=checkbox]:focus {
   outline: 0;
 }
+.plugin-root {
+  min-width: 300px;
+}
+
+/* react-tabs internal file :wink: */
+
+.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: 1% 2%;
+  cursor: pointer;
+  font-size: medium;
+}
+
+.react-tabs__tab--selected {
+  background: var(--interactive-accent);
+  color: white;
+  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/App.tsx

@@ -105,7 +105,7 @@ class App extends React.Component<any,any> {
         else if(!this.state.isLoaded)
             return <div className="loading">Loading....</div>
         else {
-            return (<div>
+            return (<div className="plugin-root">
                 <Statsview user_data={this.state.user_data} />
                 <Taskview todos={this.state.todos} onChange={this.handleChange} />
                 </div>

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}/>
     })
-    return(<ul>{listItems}</ul>);
+    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}/>
+    })
+    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"