Files
pihkaal-me/src/components/Nvim/index.tsx

63 lines
1.7 KiB
TypeScript

import { useKitty } from "~/hooks/useKitty";
import { CHAR_HEIGHT } from "../Kitty";
import { NvimEditor } from "./NvimEditor";
import { NvimInput } from "./NvimInput";
import { NvimStatusBar } from "./NvimStatusBar";
import { NvimTree } from "./NvimTree";
import { useState } from "react";
import { File } from "~/utils/types";
export const Nvim = (_props: {}) => {
const kitty = useKitty();
const [activeFile, setActiveFile] = useState<{
name: string;
url: string;
icon?: string;
}>();
const handleOpenFile = (file: File) => {
if (file.type === "link") {
window.open(file.url, "_blank")?.focus();
} else {
setActiveFile({
name: file.repo === "pihkaal" ? file.fileName : file.repo,
icon: file.icon,
url: `https://raw.githubusercontent.com/pihkaal/${file.repo}/main/${file.fileName}`,
});
}
};
return (
<div
className="grid h-full"
style={{
gridTemplateColumns: `0.4fr 2fr`,
gridTemplateRows: `1fr ${CHAR_HEIGHT}px ${CHAR_HEIGHT}px`,
}}
>
{kitty && (
<>
<div style={{ gridArea: "1 / 1 / 1 / 2" }}>
<NvimTree {...kitty} onOpen={handleOpenFile} />
</div>
<div style={{ gridArea: "1 / 2 / 1 / 3", overflow: "scroll" }}>
<NvimEditor source={activeFile?.url} />
</div>
<div style={{ gridArea: "2 / 1 / 2 / 3" }}>
<NvimStatusBar
label=" NORMAL"
labelColor="#7ea7ca"
fileIcon={activeFile?.icon}
fileName={activeFile?.name ?? `NvimTree_1`}
/>
</div>
<div style={{ gridArea: "3 / 1 / 3 / 3" }}>
<NvimInput />
</div>
</>
)}
</div>
);
};