36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface ManualConfigPanelProps {
|
|
config?: {
|
|
value?: string;
|
|
placeholder?: string;
|
|
};
|
|
onChange: (config: { value?: string; placeholder?: string }) => void;
|
|
isPreview?: boolean;
|
|
}
|
|
|
|
export const ManualConfigPanel: React.FC<ManualConfigPanelProps> = ({ config = {}, onChange, isPreview = false }) => {
|
|
return (
|
|
<div className="space-y-3 sm:space-y-4">
|
|
<div className="border-muted-foreground/50 bg-muted/30 rounded-lg border border-dashed p-3">
|
|
<p className="text-muted-foreground text-xs">사용자가 폼에서 직접 입력합니다</p>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs font-medium sm:text-sm">플레이스홀더 (선택사항)</Label>
|
|
<Input
|
|
value={config.placeholder || ""}
|
|
onChange={(e) => onChange({ ...config, placeholder: e.target.value })}
|
|
placeholder="예: 부서코드 입력"
|
|
disabled={isPreview}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">사용자에게 표시될 안내 문구입니다</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|