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
121
122
123
124
125
126
127
128
129
130
131
|
import "./App.css";
import { useState, ReactElement } from "react";
import { useStore } from "@/state/store";
import Button, { ButtonStyle } from "@/components/Button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import {
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";
import LoginOrRegister from "./components/LoginOrRegister.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 user = useStore((state) => state.user);
console.log(user);
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">
{user && !user.isLoggedIn() && (
<Dialog>
<DialogTrigger className="w-full">
<Button
text={"Login or Register"}
style={ButtonStyle.PrimarySmFill}
/>
</DialogTrigger>
<DialogContent>
<LoginOrRegister />
</DialogContent>
</Dialog>
)}
</li>
</ul>
</nav>
</div>
</div>
{renderMain(section)}
</div>
);
}
export default App;
|
