feat(ui/dotfiles): add vars (#1989)

1 files changed, 87 insertions, 3 deletions

diff --git a/ui/src/pages/Dotfiles.tsx b/ui/src/pages/Dotfiles.tsx
index 6b0870b3..29b6b54a 100644
--- a/ui/src/pages/Dotfiles.tsx
+++ b/ui/src/pages/Dotfiles.tsx
@@ -1,6 +1,35 @@
+import { useState } from "react";
 import Aliases from "@/components/dotfiles/Aliases";
+import Vars from "@/components/dotfiles/Vars";
 
-function Header() {
+enum Section {
+  Aliases,
+  Vars,
+  Scripts,
+}
+
+function renderDotfiles(current: Section) {
+  switch (current) {
+    case Section.Aliases:
+      return <Aliases />;
+    case Section.Vars:
+      return <Vars />;
+    case Section.Scripts:
+      return <div />;
+  }
+}
+
+interface HeaderProps {
+  current: Section;
+  setCurrent: (section: Section) => void;
+}
+
+interface TabsProps {
+  current: Section;
+  setCurrent: (section: Section) => void;
+}
+
+function Header({ current, setCurrent }: HeaderProps) {
   return (
     <div className="md:flex md:items-center md:justify-between">
       <div className="min-w-0 flex-1">
@@ -8,17 +37,72 @@ function Header() {
           Dotfiles
         </h2>
       </div>
+
+      <Tabs current={current} setCurrent={setCurrent} />
+    </div>
+  );
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+function Tabs({ current, setCurrent }: TabsProps) {
+  let tabs = [
+    {
+      name: "Aliases",
+      isCurrent: () => current === Section.Aliases,
+      section: Section.Aliases,
+    },
+    {
+      name: "Vars",
+      isCurrent: () => current === Section.Vars,
+      section: Section.Vars,
+    },
+    {
+      name: "Scripts",
+      isCurrent: () => current === Section.Scripts,
+      section: Section.Scripts,
+    },
+  ];
+
+  return (
+    <div>
+      <div className="mt-4">
+        <nav className="flex space-x-4" aria-label="Tabs">
+          {tabs.map((tab) => (
+            <button
+              onClick={() => {
+                setCurrent(tab.section);
+              }}
+              key={tab.name}
+              className={classNames(
+                tab.isCurrent()
+                  ? "bg-gray-100 text-gray-700"
+                  : "text-gray-500 hover:text-gray-700",
+                "rounded-md px-3 py-2 text-sm font-medium",
+              )}
+              aria-current={tab.isCurrent() ? "page" : undefined}
+            >
+              {tab.name}
+            </button>
+          ))}
+        </nav>
+      </div>
     </div>
   );
 }
 
 export default function Dotfiles() {
+  let [current, setCurrent] = useState(Section.Aliases);
+  console.log(current);
+
   return (
     <div className="pl-60">
       <div className="p-10">
-        <Header />
+        <Header current={current} setCurrent={setCurrent} />
         Manage your shell aliases, variables and paths
-        <Aliases />
+        {renderDotfiles(current)}
       </div>
     </div>
   );