add rewards panels and change styles

This commit is contained in:
kkzzhizhou 2021-11-18 14:16:20 +08:00
parent ffa79454a0
commit bc97bcfc3f
8 changed files with 163 additions and 76 deletions

View file

@ -4,13 +4,14 @@ import * as React from "react";
function HabitItem(props: any) {
return (
<div className="habit-item" id={props.id}>
<button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
<button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}>
+{props.upCount}
</button>
<p className="habit-text"><Emoji text = {props.habit_text}></Emoji></p>
<button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
<button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
-{props.downCount}
</button>
<p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
</div>
)
}

View file

@ -2,31 +2,39 @@ import * as React from "react";
import Dailiesview from "./Dailiesview"
import Habitsview from "./Habitsview"
import Todoview from "./Todoview"
import Rewardview from "./Rewardview"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
export default function Index(props: any){
const display = <div className="task-view">
<Tabs>
<TabList>
<Tab >
<span className="material-icons md-24">task_alt</span>
</Tab>
<Tab>
<span className="material-icons md-24">today</span>
</Tab>
<Tab >
<span className="material-icons md-24">add_chart</span>
</Tab>
<Tab>
<span className="material-icons md-24">add_circle_outline</span>
<span className="material-icons md-24">assignment_turned_in</span>
</Tab>
<Tab>
<span className="material-icons md-24">account_balance</span>
</Tab>
</TabList>
<TabPanel>
<Habitsview habits={props.data.habits} onChange={props.handleChangeHabits}/>
</TabPanel>
<TabPanel>
<Dailiesview dailys={props.data.dailys} onChange={props.handleChangeDailys} />
</TabPanel>
<TabPanel>
<Habitsview habits={props.data.habits} onChange={props.handleChangeHabits}/>
</TabPanel>
<TabPanel>
<Todoview todos={props.data.todos} onChange={props.handleChangeTodos} />
</TabPanel>
<TabPanel>
<Rewardview rewards={props.data.rewards} onChange={props.handleChangeRewards} />
</TabPanel>
</Tabs>
</div>
return(display);