58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import type { ComponentProps } from "react";
|
|
import { Button, Input } from "@common/components";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
|
|
|
|
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">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-8 !bg-transparent"
|
|
onClick={onSave}
|
|
aria-label="저장"
|
|
>
|
|
<i className="diveicon di-check text-2xl" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>저장</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-8 !bg-transparent"
|
|
onClick={onCancel}
|
|
aria-label="취소"
|
|
>
|
|
<i className="diveicon di-x" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>취소</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { EditableNode };
|