frontend: add Tabs.tsx

twenty-frontend/src/css/main.scss

@@ -41,6 +41,16 @@ body {
   }
 }
 
+.inactive-item {
+  @extend .text-accent;
+  a {
+    @extend .text-accent;
+    @extend .bg-primary;
+    @extend .no-underline;
+    @extend .hover-bg-secondary;
+  }
+}
+
 .markdown {
   h1, h2, h3, h4, h5, h6, h7 {
     margin: 0 !important;

twenty-frontend/src/js/components/Tabs.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+
+export type Tab = {
+  id: string;
+  label: string;
+};
+
+type Props = {
+  labels: string[];
+  defaultLabel: string;
+  onChange: (t: Tab) => void;
+};
+
+export function Tabs({ defaultLabel, labels, onChange }: Props) {
+  const tabs = labels.map(label => ({ id: label.toLowerCase(), label }));
+  const tab = tabs.find(t => t.id === defaultLabel);
+  const [active, setActive] = useState<Tab>(tab);
+
+  useEffect(() => {
+    onChange(active);
+  }, [active]);
+
+  return (
+    <ul className="flex w-3/4">
+      {...tabs.map(tab => {
+        const isActive = active?.id === tab.id;
+        const classNames = {
+          "active-item": isActive,
+          "inactive-item": !isActive,
+        };
+        return (
+          <li className={classnames(classNames)}>
+            <a
+              href="#"
+              onClick={() => setActive(tab)}
+              className="block p-2 text-smaller no-underline"
+            >
+              {tab.label}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

twenty-frontend/src/js/components/Task.tsx

@@ -7,6 +7,7 @@ import { useProjects } from "/hooks/queries/useProjects";
 import { Task, Project, TaskInput, Maybe } from "/types/schema";
 import { rendermd } from "/lib/markdown-utils";
 import { NavBar } from "/components/NavBar";
+import { Tabs, Tab } from "/components/Tabs";
 
 import classnames from "classnames";
 
@@ -97,38 +98,13 @@ export function Task({ taskId }: { taskId?: number }) {
             defaultValue={task?.title}
             {...register("title", { required: true })}
           />
-          <ul className="flex w-3/4">
+          <Tabs
-            <li
+            labels={["Editor", "Preview"]}
-              className={classnames({
+            defaultLabel={taskId ? "preview" : "editor"}
-                "active-item": isEditable,
+            onChange={(tab: Tab) => {
-                "text-secondary": !isEditable,
+              tab.id === "editor" ? setIsEditable(true) : setIsEditable(false);
-                "hover-bg-secondary": !isEditable,
+            }}
-              })}
+          />
-            >
-              <a
-                className="block p-2 text-smaller no-underline"
-                href="#"
-                onClick={() => setIsEditable(true)}
-              >
-                Editor
-              </a>
-            </li>
-            <li
-              className={classnames({
-                "active-item": !isEditable,
-                "text-primary": isEditable,
-                "hover-bg-secondary": isEditable,
-              })}
-            >
-              <a
-                className="block p-2 text-smaller no-underline"
-                href="#"
-                onClick={() => setIsEditable(false)}
-              >
-                Preview
-              </a>
-            </li>
-          </ul>
           {isEditable ? (
             <>
               <textarea