ui: redirect home route and simplify dashboard navigation
This commit is contained in:
parent
8e9acd5006
commit
4e0cf0140f
3 changed files with 13 additions and 68 deletions
|
|
@ -4,31 +4,13 @@ import { ModeToggle } from "./mode-toggle";
|
|||
import UserMenu from "./user-menu";
|
||||
|
||||
export default function Header() {
|
||||
const links = [
|
||||
{ to: "/", label: "Home" },
|
||||
{ to: "/dashboard", label: "Dashboard" },
|
||||
{ to: "/dashboard/servers", label: "Servers" },
|
||||
{ to: "/dashboard/services", label: "Services" },
|
||||
{ to: "/dashboard/domains", label: "Domains" },
|
||||
{ to: "/dashboard/notes", label: "Notes" },
|
||||
] as const;
|
||||
|
||||
return (
|
||||
<div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/75">
|
||||
<div className="mx-auto flex max-w-7xl flex-row items-center justify-between gap-4 px-4 py-3 lg:px-6">
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/" className="text-sm font-semibold tracking-[0.2em] uppercase">
|
||||
<Link to="/dashboard" className="text-sm font-semibold tracking-[0.2em] uppercase">
|
||||
minmon
|
||||
</Link>
|
||||
<nav className="flex flex-wrap gap-4 text-sm text-muted-foreground">
|
||||
{links.map(({ to, label }) => {
|
||||
return (
|
||||
<Link key={to} to={to} activeProps={{ className: "text-foreground" }}>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ModeToggle />
|
||||
|
|
|
|||
|
|
@ -129,8 +129,8 @@ export default function SignInForm() {
|
|||
|
||||
<div className="grid gap-2 border-t pt-4 text-center text-xs text-muted-foreground">
|
||||
<p>Student demo flow uses administrator sign-in only.</p>
|
||||
<Link to="/" className="text-primary underline-offset-4 hover:underline">
|
||||
Return to homepage
|
||||
<Link to="/dashboard" className="text-primary underline-offset-4 hover:underline">
|
||||
Open dashboard after sign in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,14 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
|
||||
import { trpc } from "@/utils/trpc";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: HomeComponent,
|
||||
beforeLoad: async () => {
|
||||
const session = await authClient.getSession();
|
||||
|
||||
throw redirect({
|
||||
to: session.data ? "/dashboard" : "/login",
|
||||
});
|
||||
},
|
||||
component: () => null,
|
||||
});
|
||||
|
||||
const TITLE_TEXT = `
|
||||
██████╗ ███████╗████████╗████████╗███████╗██████╗
|
||||
██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
|
||||
██████╔╝█████╗ ██║ ██║ █████╗ ██████╔╝
|
||||
██╔══██╗██╔══╝ ██║ ██║ ██╔══╝ ██╔══██╗
|
||||
██████╔╝███████╗ ██║ ██║ ███████╗██║ ██║
|
||||
╚═════╝ ╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
||||
|
||||
████████╗ ███████╗████████╗ █████╗ ██████╗██╗ ██╗
|
||||
╚══██╔══╝ ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
|
||||
██║ ███████╗ ██║ ███████║██║ █████╔╝
|
||||
██║ ╚════██║ ██║ ██╔══██║██║ ██╔═██╗
|
||||
██║ ███████║ ██║ ██║ ██║╚██████╗██║ ██╗
|
||||
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝
|
||||
`;
|
||||
|
||||
function HomeComponent() {
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl px-4 py-2">
|
||||
<pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
|
||||
<div className="grid gap-6">
|
||||
<section className="rounded-lg border p-4">
|
||||
<h2 className="mb-2 font-medium">API Status</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{healthCheck.isLoading
|
||||
? "Checking..."
|
||||
: healthCheck.data
|
||||
? "Connected"
|
||||
: "Disconnected"}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue