1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
import { useState } from "react";
import Aliases from "@/components/dotfiles/Aliases";
import Vars from "@/components/dotfiles/Vars";
enum Section {
Aliases,
Vars,
Snippets,
}
function renderDotfiles(current: Section) {
switch (current) {
case Section.Aliases:
return <Aliases />;
case Section.Vars:
return <Vars />;
case Section.Snippets:
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">
<h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
Dotfiles
</h2>
</div>
<Tabs current={current} setCurrent={setCurrent} />
</div>
);
}
function classNames(...classes: any[]) {
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: "Snippets",
isCurrent: () => current === Section.Snippets,
section: Section.Snippets,
},
];
return (
<div>
<div>
<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 current={current} setCurrent={setCurrent} />
Manage your shell aliases, variables and paths
{renderDotfiles(current)}
</div>
</div>
);
}
|
