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
110
111
112
113
114
115
116
117
118
119
120
|
import "./App.css";
import { useState, ReactElement } from "react";
import {
Cog6ToothIcon,
HomeIcon,
ClockIcon,
WrenchScrewdriverIcon,
} from "@heroicons/react/24/outline";
import Logo from "./assets/logo-light.svg";
function classNames(...classes: any) {
return classes.filter(Boolean).join(" ");
}
import Home from "./pages/Home.tsx";
import History from "./pages/History.tsx";
import Dotfiles from "./pages/Dotfiles.tsx";
enum Section {
Home,
History,
Dotfiles,
}
function renderMain(section: Section): ReactElement {
switch (section) {
case Section.Home:
return <Home />;
case Section.History:
return <History />;
case Section.Dotfiles:
return <Dotfiles />;
}
}
function App() {
// routers don't really work in Tauri. It's not a browser!
// I think hashrouter may work, but I'd rather avoiding thinking of them as
// pages
const [section, setSection] = useState(Section.Home);
const navigation = [
{
name: "Home",
icon: HomeIcon,
section: Section.Home,
},
{
name: "History",
icon: ClockIcon,
section: Section.History,
},
{
name: "Dotfiles",
icon: WrenchScrewdriverIcon,
section: Section.Dotfiles,
},
];
return (
<div>
<div className="fixed inset-y-0 z-50 flex w-60 flex-col">
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4">
<div className="flex h-16 shrink-0 items-center">
<img className="h-8 w-auto" src={Logo} alt="Atuin" />
</div>
<nav className="flex flex-1 flex-col">
<ul role="list" className="flex flex-1 flex-col gap-y-7">
<li>
<ul role="list" className="-mx-2 space-y-1 w-full">
{navigation.map((item) => (
<li key={item.name}>
<button
onClick={() => setSection(item.section)}
className={classNames(
section == item.section
? "bg-gray-50 text-green-600"
: "text-gray-700 hover:text-green-600 hover:bg-gray-50",
"group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold w-full",
)}
>
<item.icon
className={classNames(
section == item.section
? "text-green-600"
: "text-gray-400 group-hover:text-green-600",
"h-6 w-6 shrink-0",
)}
aria-hidden="true"
/>
{item.name}
</button>
</li>
))}
</ul>
</li>
<li className="mt-auto">
<a
href="#"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-green-600"
>
<Cog6ToothIcon
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-green-600"
aria-hidden="true"
/>
Settings
</a>
</li>
</ul>
</nav>
</div>
</div>
{renderMain(section)}
</div>
);
}
export default App;
|
