frontend: add Tabs.tsx
This commit is contained in:
parent
6a8902ea5c
commit
0ff4b887a1
3 changed files with 64 additions and 32 deletions
|
@ -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;
|
||||
|
|
46
twenty-frontend/src/js/components/Tabs.tsx
Normal file
46
twenty-frontend/src/js/components/Tabs.tsx
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue