52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import type { DividerBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
export type DividerPropertiesPanelProps = {
|
|
dividerProps: DividerBlockProps;
|
|
selectedBlockId: string;
|
|
updateBlock: (id: string, partial: Partial<DividerBlockProps>) => void;
|
|
};
|
|
|
|
export function DividerPropertiesPanel({ dividerProps, selectedBlockId, updateBlock }: DividerPropertiesPanelProps) {
|
|
return (
|
|
<>
|
|
<div className="space-y-1">
|
|
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
|
<span>정렬</span>
|
|
<select
|
|
className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
aria-label="구분선 정렬"
|
|
value={dividerProps.align}
|
|
onChange={(e) => {
|
|
const value = e.target.value as DividerBlockProps["align"];
|
|
updateBlock(selectedBlockId, { align: value } as any);
|
|
}}
|
|
>
|
|
<option value="left">왼쪽</option>
|
|
<option value="center">가운데</option>
|
|
<option value="right">오른쪽</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="flex flex-col gap-1 text-xs text-slate-400">
|
|
<span>두께</span>
|
|
<select
|
|
className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
|
|
aria-label="구분선 두께"
|
|
value={dividerProps.thickness}
|
|
onChange={(e) => {
|
|
const value = e.target.value as DividerBlockProps["thickness"];
|
|
updateBlock(selectedBlockId, { thickness: value } as any);
|
|
}}
|
|
>
|
|
<option value="thin">얇게</option>
|
|
<option value="medium">보통</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|