feat(web): scaffold Vite+React+TS, Tailwind v4, shadcn, router, тёмная console-тема

2026-07-03 17:06:23 +07:00
parent 93cbe538e2
commit 41242973e1
33 changed files with 8681 additions and 0 deletions
@@ -0,0 +1,76 @@
+import type { ReactNode } from "react"
+import { NavLink, useLocation } from "react-router-dom"
+import { Globe, Users, LayoutTemplate, SquareTerminal } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const NAV = [
+  { to: "/domains", label: "Domains", icon: Globe },
+  { to: "/accounts", label: "Accounts", icon: Users },
+  { to: "/templates", label: "Templates", icon: LayoutTemplate },
+] as const
+
+export function Layout({ children }: { children: ReactNode }) {
+  const location = useLocation()
+
+  return (
+    <div className="flex h-screen w-full overflow-hidden bg-background text-foreground">
+      <aside className="flex w-60 shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground">
+        <div className="flex items-center gap-2 border-b border-sidebar-border px-4 py-4">
+          <SquareTerminal className="size-4 text-primary" strokeWidth={1.75} />
+          <div className="flex flex-col leading-none">
+            <span className="text-sm font-semibold tracking-tight">
+              DNS Autoresolver
+            </span>
+            <span className="font-dns text-[10px] tracking-wider text-muted-foreground uppercase">
+              console
+            </span>
+          </div>
+        </div>
+
+        <nav className="flex-1 space-y-0.5 overflow-y-auto px-2 py-3">
+          {NAV.map(({ to, label, icon: Icon }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className={({ isActive }) =>
+                cn(
+                  "group flex items-center gap-2.5 rounded-md border-l-2 border-transparent px-2.5 py-2 text-sm font-medium text-muted-foreground transition-colors",
+                  "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                  isActive &&
+                    "border-primary bg-sidebar-accent text-sidebar-accent-foreground",
+                )
+              }
+            >
+              <Icon className="size-4 shrink-0" strokeWidth={1.75} />
+              <span className="flex-1">{label}</span>
+              <span className="font-dns text-[10px] text-muted-foreground/60 group-hover:text-muted-foreground">
+                {to}
+              </span>
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="flex items-center justify-between border-t border-sidebar-border px-4 py-3 font-dns text-[11px] text-muted-foreground">
+          <span>v0.1.0-dev</span>
+          <span className="flex items-center gap-1.5">
+            <span
+              className="size-1.5 rounded-full"
+              style={{ background: "var(--diff-insync)" }}
+              aria-hidden
+            />
+            in sync
+          </span>
+        </div>
+      </aside>
+
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <header className="flex h-11 shrink-0 items-center border-b border-border px-6">
+          <span className="font-dns text-xs text-muted-foreground">
+            {location.pathname}
+          </span>
+        </header>
+        <main className="flex-1 overflow-auto">{children}</main>
+      </div>
+    </div>
+  )
+}