45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import type { ComponentProps } from "react";
|
|
import { Button, Input } from "@common/components";
|
|
|
|
type EditableNodeProps = {
|
|
depth?: number;
|
|
onSave: () => void;
|
|
onCancel: () => void;
|
|
} & ComponentProps<typeof Input>;
|
|
|
|
function EditableNode({
|
|
depth,
|
|
onSave,
|
|
onCancel,
|
|
...props
|
|
}: EditableNodeProps) {
|
|
return (
|
|
<div
|
|
className="flex items-center gap-2 rounded-sm bg-accent p-2"
|
|
style={{ marginInlineStart: !depth ? 0 : depth * 5 + 5 }}
|
|
>
|
|
<Input {...props} className="h-[2.5rem] !text-[1.3rem] text-foreground" />
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-8 !bg-transparent"
|
|
onClick={onSave}
|
|
>
|
|
<i className="diveicon di-check text-2xl" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-8 !bg-transparent"
|
|
onClick={onCancel}
|
|
>
|
|
<i className="diveicon di-x" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { EditableNode };
|