File size: 3,160 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | "use client";
import { LoaderCircle, Sparkles, X } from "lucide-react";
import type { SourceDraftMode } from "./types";
export function ComposerSourceDraft({
sourceDraftMode,
draftTitle,
onDraftTitleChange,
draftText,
onDraftTextChange,
onSaveDraftSource,
onClose,
isSavingDraft,
}: {
sourceDraftMode: Exclude<SourceDraftMode, null>;
draftTitle: string;
onDraftTitleChange: (value: string) => void;
draftText: string;
onDraftTextChange: (value: string) => void;
onSaveDraftSource: () => void;
onClose: () => void;
isSavingDraft: boolean;
}) {
const label =
sourceDraftMode === "link"
? "Paste link source"
: sourceDraftMode === "syllabus"
? "Paste syllabus"
: "Add text source";
const titlePlaceholder =
sourceDraftMode === "link" ? "Source title" : sourceDraftMode === "syllabus" ? "Syllabus title" : "Notes title";
const bodyPlaceholder =
sourceDraftMode === "link"
? "Paste a public study link..."
: sourceDraftMode === "syllabus"
? "Paste exam syllabus, chapter list, or teacher blueprint..."
: "Paste syllabus, chapter notes, or teacher instructions...";
return (
<div className="mb-3 rounded-2xl border border-white/[0.09] bg-black/24 p-3">
<div className="mb-2 flex items-center justify-between gap-3">
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/42">{label}</p>
<button
type="button"
onClick={onClose}
aria-label="Close source editor"
className="grid size-7 place-items-center rounded-full text-white/42 transition hover:bg-white/[0.06] hover:text-white"
>
<X className="size-3.5" />
</button>
</div>
<input
value={draftTitle}
onChange={(event) => onDraftTitleChange(event.target.value)}
placeholder={titlePlaceholder}
className="mb-2 h-10 w-full rounded-xl border border-white/[0.08] bg-white/[0.035] px-3 text-sm text-white outline-none placeholder:text-white/30 focus:border-white/22"
/>
<textarea
value={draftText}
onChange={(event) => onDraftTextChange(event.target.value)}
placeholder={bodyPlaceholder}
rows={3}
className="min-h-[5.5rem] w-full resize-none rounded-xl border border-white/[0.08] bg-white/[0.035] px-3 py-2 text-sm leading-6 text-white outline-none placeholder:text-white/30 focus:border-white/22"
/>
<div className="mt-2 flex items-center justify-between gap-3">
<p className="text-[11px] leading-4 text-white/34">Saved through the real source endpoint.</p>
<button
type="button"
onClick={onSaveDraftSource}
disabled={isSavingDraft || !draftText.trim()}
className="inline-flex min-h-9 items-center gap-2 rounded-xl bg-white px-3 text-xs font-bold text-black transition hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-45"
>
{isSavingDraft ? <LoaderCircle className="size-3.5 animate-spin" /> : <Sparkles className="size-3.5" />}
Save source
</button>
</div>
</div>
);
}
|