72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogTrigger } from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Hammer, Loader2 } from "lucide-react";
|
|
import { useEffect, useId } from "react";
|
|
import { BuildTemplateDialog } from "./build-template-dialog";
|
|
import { useTemplateEditorStore } from "./template-editor-store";
|
|
|
|
function TemplateEditorTopBar() {
|
|
const currentFilePath = useTemplateEditorStore(
|
|
(state) => state.currentFilePath,
|
|
);
|
|
return (
|
|
<header className="sticky top-0 flex shrink-0 items-center justify-between gap-2 border-b bg-background p-4">
|
|
<p className="font-bold">{currentFilePath}</p>
|
|
<div className="flex space-x-6">
|
|
<VimModeToggle />
|
|
<BuildTemplateButton />
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function BuildTemplateButton() {
|
|
const isBuildInProgress = useTemplateEditorStore(
|
|
(state) => state.isBuildInProgress,
|
|
);
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button>
|
|
{isBuildInProgress ? (
|
|
<Loader2 className="animate-spin" />
|
|
) : (
|
|
<Hammer />
|
|
)}{" "}
|
|
Build
|
|
</Button>
|
|
</DialogTrigger>
|
|
<BuildTemplateDialog />
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function VimModeToggle() {
|
|
const id = useId();
|
|
const isVimModeEnabled = useTemplateEditorStore(
|
|
(state) => state.isVimModeEnabled,
|
|
);
|
|
const setIsVimModeEnabled = useTemplateEditorStore(
|
|
(state) => state.setIsVimModeEnabled,
|
|
);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem("vimModeEnabled", `${isVimModeEnabled}`);
|
|
}, [isVimModeEnabled]);
|
|
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<Switch
|
|
id={id}
|
|
checked={isVimModeEnabled}
|
|
onCheckedChange={setIsVimModeEnabled}
|
|
/>
|
|
<Label htmlFor={id}>Vim mode</Label>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { TemplateEditorTopBar };
|