39 lines
1.3 KiB
React
39 lines
1.3 KiB
React
|
import { Label } from '@/components/ui/label';
|
||
|
|
import { Input } from '@/components/ui/input';
|
||
|
|
|
||
|
|
// "Save this setup as a reusable template" toggle + optional template name.
|
||
|
|
// Presentational — the parent owns the state and performs the save.
|
||
|
|
export default function TemplateSection({
|
||
|
|
inp,
|
||
|
|
saveTemplate, setSaveTemplate,
|
||
|
|
templateName, setTemplateName,
|
||
|
|
namePlaceholder,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className="col-span-2 rounded-lg border border-border/60 bg-muted/20 p-3">
|
||
|
|
<label className="flex items-center gap-2.5 cursor-pointer group">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={saveTemplate}
|
||
|
|
onChange={e => setSaveTemplate(e.target.checked)}
|
||
|
|
className="h-4 w-4 rounded border-border accent-primary"
|
||
|
|
/>
|
||
|
|
<span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
|
||
|
|
Save this setup as a reusable template
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
{saveTemplate && (
|
||
|
|
<div className="mt-2 space-y-1.5">
|
||
|
|
<Label className="text-xs uppercase tracking-wider text-muted-foreground">Template Name</Label>
|
||
|
|
<Input
|
||
|
|
className={inp}
|
||
|
|
value={templateName}
|
||
|
|
onChange={e => setTemplateName(e.target.value)}
|
||
|
|
placeholder={namePlaceholder || 'My bill template'}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|