This repository has been archived on 2026-05-19. You can view files and clone it, but cannot push or open issues or pull requests.
Files
shadcn-slint/web/src/App.tsx
2026-01-30 12:56:00 +08:00

89 lines
2.5 KiB
TypeScript

import {SidebarInset, SidebarMenuButton, SidebarMenuItem, SidebarProvider} from "@/components/ui/sidebar.tsx";
import {EarthIcon, Grid2X2Icon, HomeIcon, Link2Icon, LogsIcon, SettingsIcon} from "lucide-react";
import {AppSidebar} from "@/components/app-sidebar.tsx";
import {Link, Route, Switch, useLocation} from "wouter";
import {Home} from "@/pages/Home";
import Proxies from "@/pages/Proxies.tsx";
import {Profiles} from "@/pages/Profiles";
import {Connections} from "@/pages/Connections.tsx";
import {Logs} from "@/pages/Logs.tsx";
import {Settings} from "@/pages/Settings.tsx";
import {Toaster} from "@/components/ui/sonner.tsx";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
// Menu items.
const items = [
{
title: "Home",
url: "/",
icon: HomeIcon,
},
{
title: "Proxies",
url: "/proxies",
icon: EarthIcon,
},
{
title: "Profiles",
url: "/profiles",
icon: Grid2X2Icon,
},
{
title: "Connections",
url: "/connections",
icon: Link2Icon,
},
{
title: "Logs",
url: "/logs",
icon: LogsIcon,
},
{
title: "Settings",
url: "/settings",
icon: SettingsIcon,
},
]
const queryClient = new QueryClient()
function App() {
const [location] = useLocation();
return (
<div>
<QueryClientProvider client={queryClient}>
<Toaster position="top-right" closeButton={true}/>
<SidebarProvider>
<AppSidebar>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={location == item.url}>
<Link to={item.url}>
<item.icon/>
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</AppSidebar>
<SidebarInset className={'overflow-hidden'}>
<div className={'flex-1 size-full min-h-0 min-w-0 overflow-hidden'}>
<Switch>
<Route path="/" component={Home}/>
<Route path="/proxies" component={Proxies}/>
<Route path="/profiles" component={Profiles}/>
<Route path="/connections" component={Connections}/>
<Route path="/logs" component={Logs}/>
<Route path="/settings" component={Settings}/>
</Switch>
</div>
</SidebarInset>
</SidebarProvider>
</QueryClientProvider>
</div>
)
}
export default App