Developer
78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { Icon } from "../components/ui";
|
|
import {
|
|
ToolTypesTab,
|
|
ToolConfigsTab,
|
|
ConfigFoldersTab,
|
|
} from "../components/features/tool-workshop";
|
|
|
|
type Tab = "types" | "configs" | "folders";
|
|
|
|
export const ToolWorkshopPage = () => {
|
|
const [activeTab, setActiveTab] = useState<Tab>("types");
|
|
|
|
return (
|
|
<div className="container">
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: "1rem",
|
|
}}
|
|
>
|
|
<h1>Tool Workshop</h1>
|
|
</div>
|
|
|
|
<div
|
|
className="tabs"
|
|
style={{
|
|
display: "flex",
|
|
gap: "0.5rem",
|
|
marginBottom: "1rem",
|
|
borderBottom: "1px solid var(--color-border)",
|
|
}}
|
|
>
|
|
{(["types", "configs", "folders"] as Tab[]).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={activeTab === tab ? "tab-active" : "tab"}
|
|
style={{
|
|
padding: "0.5rem 1rem",
|
|
borderBottom:
|
|
activeTab === tab
|
|
? "2px solid var(--color-primary)"
|
|
: "2px solid transparent",
|
|
background: "none",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
fontWeight: activeTab === tab ? 600 : 400,
|
|
}}
|
|
>
|
|
{tab === "types" && (
|
|
<>
|
|
<Icon name="code" size="sm" /> Tool Types
|
|
</>
|
|
)}
|
|
{tab === "configs" && (
|
|
<>
|
|
<Icon name="settings" size="sm" /> Configs
|
|
</>
|
|
)}
|
|
{tab === "folders" && (
|
|
<>
|
|
<Icon name="folder" size="sm" /> Config Folders
|
|
</>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{activeTab === "types" && <ToolTypesTab />}
|
|
{activeTab === "configs" && <ToolConfigsTab />}
|
|
{activeTab === "folders" && <ConfigFoldersTab />}
|
|
</div>
|
|
);
|
|
};
|