packages/devtools-ui/src/components/layout.tsx
import clsx from "clsx";
import React from "react";
import { Header } from "./header";
import { ProjectIdFixBanner } from "./project-id-fix-banner";
import { Sidebar } from "./sidebar";
type Props = React.PropsWithChildren<{}>;
export const Layout = ({ children }: Props) => {
return (
<div
id="re-devtools-ui-layout"
className={clsx("re-bg-gray-900", "re-flex", "re-flex-col", "re-h-full")}
>
<Header />
<div
className={clsx(
"re-flex",
"re-flex-1",
"re-w-full",
"re-h-full",
"re-overflow-hidden",
"re-h-[calc(100vh-36px-8px-8px-1px)]",
)}
>
<Sidebar />
<div
className={clsx(
"re-flex-1",
"re-px-4",
"re-pt-4",
"md:re-px-6",
"md:re-pt-6",
"lg:re-px-8",
"lg:re-pt-8",
"re-flex",
"re-flex-col",
"re-pb-0",
)}
>
<ProjectIdFixBanner />
{children}
</div>
</div>
</div>
);
};