53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useBuilderState } from "../hooks/useBuilderState";
|
|
import type { Component, TitleConfig } from "@/types/invyone-component";
|
|
|
|
export default function TitleProps({ block }: { block: Component }) {
|
|
const updateBlockConfig = useBuilderState((s) => s.updateBlockConfig);
|
|
const config = block.config as TitleConfig;
|
|
|
|
const update = (key: string, val: any) => updateBlockConfig(block.id, { [key]: val });
|
|
|
|
return (
|
|
<>
|
|
<div className="dev-prop-sec">제목 설정</div>
|
|
<div className="dev-prop-row">
|
|
<span className="dev-prop-label">텍스트</span>
|
|
<input className="dev-input" value={config.text}
|
|
onChange={(e) => update("text", e.target.value)} />
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">크기</span>
|
|
<select className="dev-select" value={config.fontSize}
|
|
onChange={(e) => update("fontSize", e.target.value)}>
|
|
<option value="0.5rem">작게</option>
|
|
<option value="0.75rem">보통</option>
|
|
<option value="1rem">크게</option>
|
|
<option value="1.2rem">아주 크게</option>
|
|
</select>
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">굵기</span>
|
|
<select className="dev-select" value={config.fontWeight}
|
|
onChange={(e) => update("fontWeight", e.target.value)}>
|
|
<option value="400">보통</option>
|
|
<option value="500">약간 굵게</option>
|
|
<option value="700">굵게</option>
|
|
<option value="800">아주 굵게</option>
|
|
</select>
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">정렬</span>
|
|
<select className="dev-select" value={config.align}
|
|
onChange={(e) => update("align", e.target.value)}>
|
|
<option value="left">왼쪽</option>
|
|
<option value="center">가운데</option>
|
|
<option value="right">오른쪽</option>
|
|
</select>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|