feat: add frontend

frontend/src/components/site-header.tsx

@@ -0,0 +1,43 @@
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { ModeToggle } from "./mode-toggle";
+import { useQuery } from "@tanstack/react-query";
+
+export function SiteHeader() {
+  const { data: pingResult } = useQuery({
+    queryKey: ["ping"],
+    queryFn: async () => {
+      let res = await fetch("/api/scp/ping");
+      return await res.text();
+    },
+    refetchInterval: 30000,
+  });
+
+  return (
+    <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <div className="flex flex-row gap-2 justify-center items-center">
+          <span>Netcup</span>
+          {pingResult === "true" ? (
+            <div className="bg-green-500 rounded-[100%] animate-pulse w-4 h-4 ">
+              &nbsp;
+            </div>
+          ) : (
+            <div className="bg-red-700 rounded-[100%] animate-pulse w-4 h-4">
+              &nbsp;
+            </div>
+          )}
+        </div>
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4"
+        />
+        <h1 className="text-base font-medium">Documents</h1>
+        <div className="ml-auto flex items-center gap-2">
+          <ModeToggle />
+        </div>
+      </div>
+    </header>
+  );
+}