added new icons and new monitor

2026-01-23 19:34:03 -06:00
parent 42168efe65
commit 09fdf8e98c
13 changed files with 238 additions and 21 deletions
@@ -0,0 +1,53 @@
+"use client";
+
+import { usePathname, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useState, ReactNode } from "react";
+
+interface ToggleOption {
+  key: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface ToggleProps {
+  options: ToggleOption[];
+  defaultView?: string;
+}
+
+export default function ToggleTable({ options, defaultView }: ToggleProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const [view, setView] = useState(defaultView || options[0].key);
+
+  const handleClick = (key: string) => {
+    setView(key);
+
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("key", key);
+
+    router.replace(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <section className="toggleSection" style={{maxWidth:"none"}}>
+      <div className="toggleGroup">
+        {options.map((opt) => (
+          <button
+            key={opt.key}
+            className={`toggleButton ${view === opt.key ? "active" : ""}`}
+            onClick={() => handleClick(opt.key)}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="padding toggleContent">
+        {options.find((opt) => opt.key === view)?.content}
+      </div>
+    </section>
+  );
+}
+//IO