From 0ff4b887a11e85b26e557aa99619e59a3d5857a5 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Sun, 14 Jan 2024 06:50:38 -0300
Subject: [PATCH] frontend: add `Tabs.tsx`

---
 twenty-frontend/src/css/main.scss          | 10 +++++
 twenty-frontend/src/js/components/Tabs.tsx | 46 ++++++++++++++++++++++
 twenty-frontend/src/js/components/Task.tsx | 40 ++++---------------
 3 files changed, 64 insertions(+), 32 deletions(-)
 create mode 100644 twenty-frontend/src/js/components/Tabs.tsx

diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss
index 9526d0d..f17bba1 100644
--- a/twenty-frontend/src/css/main.scss
+++ b/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;
diff --git a/twenty-frontend/src/js/components/Tabs.tsx b/twenty-frontend/src/js/components/Tabs.tsx
new file mode 100644
index 0000000..d32943f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/twenty-frontend/src/js/components/Task.tsx b/twenty-frontend/src/js/components/Task.tsx
index f6c710e..ba88c41 100644
--- a/twenty-frontend/src/js/components/Task.tsx
+++ b/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">
-            <li
-              className={classnames({
-                "active-item": isEditable,
-                "text-secondary": !isEditable,
-                "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>
+          <Tabs
+            labels={["Editor", "Preview"]}
+            defaultLabel={taskId ? "preview" : "editor"}
+            onChange={(tab: Tab) => {
+              tab.id === "editor" ? setIsEditable(true) : setIsEditable(false);
+            }}
+          />
           {isEditable ? (
             <>
               <textarea