68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { useKitty } from "~/hooks/useKitty";
|
|
import { CHAR_HEIGHT, CHAR_WIDTH } from "../Kitty";
|
|
import { NvimEditor } from "./NvimEditor";
|
|
import { NvimInput } from "./NvimInput";
|
|
import { NvimStatusBar } from "./NvimStatusBar";
|
|
import { NvimTree } from "./NvimTree";
|
|
import { useState } from "react";
|
|
import { type InnerKittyProps } from "~/utils/types";
|
|
import { type Child, type Icon } from "~/utils/tree";
|
|
|
|
export const Nvim = (_props: unknown) => {
|
|
const kitty = useKitty();
|
|
|
|
return kitty && <InnerNvimTree {...kitty} />;
|
|
};
|
|
|
|
const InnerNvimTree = (props: InnerKittyProps<typeof Nvim>) => {
|
|
const [activeChild, setActiveChild] = useState<{
|
|
name: string;
|
|
content: string;
|
|
icon: Icon;
|
|
}>();
|
|
|
|
const handleOpenChild = (child: Child) => {
|
|
if (child.type === "link") {
|
|
window.open(child.url, "_blank")?.focus();
|
|
} else {
|
|
setActiveChild(child);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="grid h-full"
|
|
style={{
|
|
gridTemplateColumns: `minmax(${CHAR_WIDTH * 20}px, ${
|
|
Math.round(props.cols * 0.2) * CHAR_WIDTH
|
|
}px) 1fr`,
|
|
gridTemplateRows: `1fr ${CHAR_HEIGHT}px ${CHAR_HEIGHT}px`,
|
|
}}
|
|
>
|
|
<div style={{ gridArea: "1 / 1 / 1 / 2" }}>
|
|
<NvimTree {...props} onOpen={handleOpenChild} />
|
|
</div>
|
|
<div
|
|
className="scrollbar overflow-y-scroll"
|
|
style={{
|
|
gridArea: "1 / 2 / 1 / 3",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
<NvimEditor content={activeChild?.content} />
|
|
</div>
|
|
<div style={{ gridArea: "2 / 1 / 2 / 3" }}>
|
|
<NvimStatusBar
|
|
label=" NORMAL"
|
|
labelColor="#7ea7ca"
|
|
fileIcon={activeChild?.icon}
|
|
fileName={activeChild?.name}
|
|
/>
|
|
</div>
|
|
<div style={{ gridArea: "3 / 1 / 3 / 3" }}>
|
|
<NvimInput />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|