Header

Author: Yadro

src/screens/hours/HoursScreen.tsx

@@ -6,14 +6,14 @@ import { createUseStyles } from 'react-jss';
 import rootStore from '../../modules/RootStore';
 import HoursCard from './components/HoursCard/HoursCard';
 import { getTimeItems } from '../../helpers/TaskHelper';
-import SelectDate from '../../components/SelectDate';
 import TimeRangeModal from '../../components/TimeRangeModal/TimeRangeModal';
 import TaskTimeItemModel from '../../modules/tasks/models/TaskTimeItemModel';
 import { Undefined } from '../../types/CommonTypes';
 import TotalHours from './components/TotalHours/TotalHours';
 import { mapCurrentNext } from '../../helpers/ArrayHelper';
 import { ITimeRangeModel } from '../../modules/tasks/models/TaskModel';
 import { msToTime } from '../../helpers/DateTime';
+import Header from './components/Header';
 
 const { tasksStore } = rootStore;
 
@@ -28,7 +28,7 @@ function getDiff(
   return '';
 }
 
-export default observer(function HoursView() {
+export default observer(function HoursScreen() {
   const classes = useStyles();
   const [date, setDate] = useState<Date>(new Date());
   const [currentTaskTime, setCurrentTaskTime] = useState<
@@ -44,7 +44,7 @@ export default observer(function HoursView() {
   return (
     <Layout className={classes.hours}>
       <Space direction="vertical">
-        <SelectDate date={date} onChange={setDate} />
+        <Header date={date} setDate={setDate} />
         <TotalHours timeItems={timeItems} />
         <div className={classes.cards}>
           {mapCurrentNext(timeItems, (item, next, index) => (

src/screens/hours/components/Header.tsx

@@ -0,0 +1,43 @@
+import React, { FC } from 'react';
+import { observer } from 'mobx-react';
+import { Col, Row } from 'antd';
+import { createUseStyles } from 'react-jss';
+
+import SelectDate from '../../../components/SelectDate';
+import RadioGroupChangeHoursView from './RadioGroupChangeHoursView';
+
+type Props = {
+  date: Date;
+  setDate(date: Date): void;
+};
+
+const Header: FC<Props> = ({ date, setDate }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <Row className={classes.main}>
+      <Col span={8} offset={8} className={classes.alignCenter}>
+        <SelectDate date={date} onChange={setDate} />
+      </Col>
+      <Col span={8} className={classes.alignRight}>
+        <RadioGroupChangeHoursView onChange={(_option) => {}} />
+      </Col>
+    </Row>
+  );
+};
+
+export default observer(Header);
+
+const useStyles = createUseStyles({
+  main: {
+    flex: 1,
+  },
+  alignCenter: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  alignRight: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+});

src/screens/hours/components/RadioGroupChangeHoursView.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import { CheckboxOptionType } from 'antd/lib/checkbox/Group';
+import { AppstoreOutlined, BuildOutlined } from '@ant-design/icons';
+import { Radio } from 'antd';
+import { observer } from 'mobx-react';
+
+enum Options {
+  Edit,
+  Timeline,
+}
+
+const ICON_STYLE = { fontSize: '20px' };
+
+const options: CheckboxOptionType[] = [
+  { label: <AppstoreOutlined style={ICON_STYLE} />, value: Options.Edit },
+  { label: <BuildOutlined style={ICON_STYLE} />, value: Options.Timeline },
+];
+
+type Props = {
+  onChange(val: Options): void;
+};
+
+const RadioGroupChangeHoursView: FC<Props> = () => {
+  return (
+    <Radio.Group options={options} optionType="button" buttonStyle="solid" />
+  );
+};
+
+export default observer(RadioGroupChangeHoursView);