59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import { Edit3, Save } from 'lucide-react';
|
|
|
|
import { FRAME_SECTION_LABELS } from '@/shared/constants/frame';
|
|
import { Button } from '@/components/ui/button';
|
|
import { FrameSectionField } from '@/components/frame/FrameSectionField';
|
|
import { FrameWeekPicker } from '@/components/frame/FrameWeekPicker';
|
|
import type { FrameModuleViewProps } from '@/components/frame/types';
|
|
|
|
export function FrameEntryForm({ workflow }: FrameModuleViewProps) {
|
|
if (!workflow.showNewForm || !workflow.canEdit) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border-2 border-amber-500/30 shadow-lg shadow-amber-500/10 p-6 space-y-4">
|
|
<h3 className="font-bold text-lg text-white flex items-center gap-2">
|
|
<Edit3 size={18} className="text-amber-400" /> Create New F.R.A.M.E. Entry
|
|
</h3>
|
|
<FrameWeekPicker
|
|
weekStart={workflow.newEntry.weekStart}
|
|
weekLabel={workflow.newEntry.weekLabel}
|
|
onWeekStartChange={(iso) => workflow.updateNewEntryField('weekStart', iso)}
|
|
onLabelChange={(label) => workflow.updateNewEntryField('weekLabel', label)}
|
|
/>
|
|
{FRAME_SECTION_LABELS.map((section) => (
|
|
<FrameSectionField
|
|
key={section.key}
|
|
section={section}
|
|
value={workflow.newEntry[section.key]}
|
|
onChange={(value) => workflow.updateNewEntrySection(section.key, value)}
|
|
/>
|
|
))}
|
|
{workflow.formError && <p className="text-xs text-red-300">{workflow.formError}</p>}
|
|
<div className="flex gap-3">
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
void workflow.saveNewEntry();
|
|
}}
|
|
disabled={workflow.isSaving}
|
|
loading={workflow.isSaving}
|
|
loadingLabel="Saving..."
|
|
leadingIcon={<Save size={16} />}
|
|
className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-medium text-sm hover:shadow-lg transition-all disabled:opacity-50"
|
|
>
|
|
Publish Entry
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={() => workflow.setShowNewForm(false)}
|
|
className="px-5 py-2.5 bg-slate-700 text-slate-300 rounded-xl font-medium text-sm hover:bg-slate-600 transition-colors"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|