44 lines
1.3 KiB
TypeScript
44 lines
1.3 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="rounded-lg border border-dashed border-muted-foreground/50 bg-muted/30 p-3">
|
|
<p className="text-xs text-muted-foreground">
|
|
사용자가 폼에서 직접 입력합니다
|
|
</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>
|
|
);
|
|
};
|