Better print style + base tabs

src/routes/project/index.tsx

@@ -2,14 +2,12 @@ import { FunctionalComponent, h } from "preact";
 import { useEffect } from "preact/hooks";
 import * as style from "./style.css";
 import { newProject } from "../../models/project";
-import TaskTable from "./tasks-table";
-import TimePreview from "./time-preview";
-import FinancialPreview from "./financial-preview";
-import { useProjectReducer, addTask, updateTaskEstimation, removeTask, updateProjectLabel, updateTaskLabel } from "../../hooks/use-project-reducer";
-import { Task, TaskID, EstimationConfidence } from "../../models/task";
+import { useProjectReducer, updateProjectLabel } from "../../hooks/use-project-reducer";
 import { getProjectStorageKey } from "../../util/storage";
 import { useLocalStorage } from "../../hooks/use-local-storage";
 import EditableText from "../../components/editable-text";
+import Tabs from "../../components/tabs";
+import EstimationTab from "./estimation-tab";
 
 export interface ProjectProps {
     projectId: string
@@ -20,22 +18,6 @@ const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
     const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
     const [ project, dispatch ] = useProjectReducer(storedProject);
 
-    const onTaskAdd = (task: Task) => {
-        dispatch(addTask(task));
-    };
-
-    const onTaskRemove = (taskId: TaskID) => {
-        dispatch(removeTask(taskId));
-    }
-
-    const onTaskLabelUpdate = (taskId: TaskID, label: string) => {
-        dispatch(updateTaskLabel(taskId, label));
-    }
-
-    const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
-        dispatch(updateTaskEstimation(taskId, confidence, value));
-    };
-
     const onProjectLabelChange = (projectLabel: string) => {
         dispatch(updateProjectLabel(projectLabel));
     };
@@ -49,38 +31,28 @@ const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
         <div class={`container ${style.estimation}`}>
             <EditableText
                 editIconClass="is-size-4"
-                render={(value) => (<h3 class="is-size-3">{value}</h3>)}
+                render={(value) => (<h2 class="is-size-3">{value}</h2>)}
                 onChange={onProjectLabelChange}
                 value={project.label ? project.label : "Projet sans nom"} />
-            <div class="tabs">
-                <ul>
-                    <li class="is-active">
-                        <a>
-                            <span class="icon is-small">📋</span>
-                            Estimation
-                        </a>
-                    </li>
-                    {/* <li>
-                        <a disabled>
-                            <span class="icon is-small">⚙️</span>
-                            Paramètres
-                        </a>
-                    </li> */}
-                </ul>
-            </div>
-            <div class="columns">
-                <div class="column is-9">
-                    <TaskTable 
-                        project={project} 
-                        onTaskAdd={onTaskAdd}
-                        onTaskRemove={onTaskRemove}
-                        onTaskLabelUpdate={onTaskLabelUpdate}
-                        onEstimationChange={onEstimationChange} />    
-                </div>
-                <div class="column is-3">
-                    <TimePreview project={project} />
-                    <FinancialPreview project={project} />
-                </div>
+            <div class={style.tabContainer}>
+                <Tabs items={[
+                        {
+                            label: 'Estimation',
+                            icon: '📋',
+                            render: () => <EstimationTab project={project} dispatch={dispatch} />
+                        },
+                        {
+                            label: 'Paramètres',
+                            icon: '⚙️',
+                            render: () => null
+                        },
+                        {
+                            label: 'Exporter',
+                            icon: '↗️',
+                            render: () => null
+                        }
+                    ]}
+                />
             </div>
         </div>
     );