PolyPaw/habitica-sync
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS and Tabs Added

Browse source
This commit is contained in:
Leoh 2021-10-16 23:33:38 +05:30
parent a84b981019
commit 9c58769a99
7 changed files with 2149 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

25
view/Components/Taskview/index.tsx
View file

@ -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);
}