import { TemplateIcon, CodeIcon, TerminalIcon } from "@heroicons/react/outline";
import { TreeIcon } from "~/components/Icons/TreeIcon";
import { useHotkeys } from "react-hotkeys-hook";
import { Link, useLocation, useNavigate } from "remix";
import { useJsonDoc } from "~/hooks/useJsonDoc";
import { ToolTip } from "./ToolTip";
import { Body } from "./Primitives/Body";
import { ShortcutIcon } from "./Icons/ShortcutIcon";
export function SideBar() {
const { doc } = useJsonDoc();
return (
Column view
⌘
1
JSON view
⌘
2
Tree view
⌘
3
Terminal
⌘
4
);
}
function SidebarLink({
children,
to,
hotKey,
}: {
children: React.ReactNode;
to?: string;
hotKey?: string;
}) {
const location = useLocation();
const isActive = location.pathname === to;
if (hotKey) {
const navigate = useNavigate();
useHotkeys(
hotKey,
(e) => {
e.preventDefault();
if (!isActive && to) {
navigate(to);
}
},
[navigate, isActive, to]
);
}
const classes = isActive
? "relative w-10 h-10 mb-1 text-white bg-indigo-700 rounded-sm cursor:pointer transition"
: "relative w-10 h-10 mb-1 text-slate-700 hover:bg-slate-300 rounded-sm cursor:pointer transition dark:text-white dark:hover:bg-slate-700";
return !!to ? (
{children}
) : (
{children}
);
}