64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
"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 | (() => ReactNode);
|
|
onClick?: () => void;
|
|
}
|
|
|
|
interface ToggleProps {
|
|
options: ToggleOption[];
|
|
defaultView?: string;
|
|
}
|
|
|
|
export default function Toggle({ 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);
|
|
params.delete("machine");
|
|
|
|
router.replace(`${pathname}?${params.toString()}`);
|
|
};
|
|
|
|
return (
|
|
<section className="toggleSection">
|
|
<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">
|
|
{(() => {
|
|
const active = options.find((opt) => opt.key === view)?.content;
|
|
|
|
if (typeof active === "function") {
|
|
return active();
|
|
}
|
|
|
|
return active;
|
|
})()}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
//IO
|