prasi-lib/comps/md/mode/v-split.tsx

44 lines
1.4 KiB
TypeScript
Executable File

import { FC } from "react";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import { MDDetail } from "../parts/MDDetail";
import { MDMaster } from "../parts/MDMaster";
import { MDLocal, MDRef } from "../utils/typings";
import { getPathname } from "@/utils/pathname";
export const ModeVSplit: FC<{ md: MDLocal; mdr: MDRef }> = ({ md, mdr }) => {
return (
<div className={cx("c-flex-1")}>
<PanelGroup direction="vertical">
<Panel className="c-border-b c-flex">
<MDMaster md={md} mdr={mdr} />
</Panel>
{(md.selected || isEditor) && (
<>
<PanelResizeHandle />
<Panel
className="c-flex c-flex-col c-items-stretch"
defaultSize={
Number(
localStorage.getItem(
`prasi-md-${getPathname({ hash: false })}${md.name}`
)
) || md.detail_size
}
onResize={(e) => {
if (e < 80 && !isEditor) {
localStorage.setItem(
`prasi-md-${getPathname({ hash: false })}${md.name}`,
e.toString()
);
}
}}
>
<MDDetail md={md} mdr={mdr} />
</Panel>
</>
)}
</PanelGroup>
</div>
);
};