{title}

Back to list

form.setData('title', event.target.value) } required className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData('slug', event.target.value) } placeholder="Optional" className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />

form.setData('published_at', event.target.value) } className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />

form.setData('excerpt', event.target.value)
                        }
                        className="h-24 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                    />
                </Field>

<Field label="Media Files" error={form.errors.new_media}>
                    <input
                        type="file"
                        multiple
                        accept="image/jpeg,image/png,image/webp,image/gif,video/mp4,video/webm"
                        onChange={(event) => {
                            const files = event.target.files
                                ? Array.from(event.target.files)
                                : [];
                            form.setData('new_media', files);
                        }}
                        className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff]"
                    />
                    {form.errors['new_media.0'] ? (
                        <p className="mt-1 text-xs text-rose-600">
                            {form.errors['new_media.0']}
                        </p>
                    ) : null}
                </Field>

{existingMedia.length > 0 ? (
                    <div className="space-y-3">
                        <p className="text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                            Existing Media
                        </p>
                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                            {existingMedia.map((media) => {
                                const isMarked =
                                    form.data.remove_media_ids.includes(
                                        media.id,
                                    );

return (
                                    <div
                                        key={media.id}
                                        className="rounded-xl border border-slate-200 p-3 dark:border-[#3c2b68]"
                                    >
                                        {media.is_image ? (
                                            <img
                                                src={media.url}
                                                alt={
                                                    media.original_name ||
                                                    `Blog media ${media.id}`
                                                }
                                                className="h-32 w-full rounded-lg object-cover"
                                            />
                                        ) : (
                                            <video
                                                src={media.url}
                                                controls
                                                className="h-32 w-full rounded-lg object-cover"
                                            />
                                        )}
                                        <p className="mt-2 truncate text-xs text-slate-600 dark:text-[#c7bde8]">
                                            {media.original_name ||
                                                `Media ${media.id}`}
                                        </p>
                                        <div className="mt-3 flex flex-wrap items-center gap-2">
                                            <button
                                                type="button"
                                                onClick={() =>
                                                    insertBlock(
                                                        `[media:${media.id}]`,
                                                    )
                                                }
                                                className="rounded-md border border-slate-300 px-2.5 py-1 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-[#4a3a78] dark:text-[#e5dcff] dark:hover:bg-[#2a1d50]"
                                            >
                                                Insert
                                            </button>
                                            <div className="inline-flex items-center gap-2 text-xs text-rose-700 dark:text-rose-300">
                                                <Switch
                                                    checked={isMarked}
                                                    onChange={(checked) =>
                                                        toggleRemoveMedia(
                                                            media.id,
                                                            checked,
                                                        )
                                                    }
                                                    ariaLabel={`Remove blog media ${media.id} on save`}
                                                />
                                                Remove
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                ) : null}

<Field label="Body" error={form.errors.body}>
                    <div className="mb-2 flex flex-wrap gap-2">
                        <EditorButton
                            onClick={() => insertBlock('## Section heading')}
                        >
                            H2
                        </EditorButton>
                        <EditorButton
                            onClick={() => insertBlock('### Detail heading')}
                        >
                            H3
                        </EditorButton>
                        <EditorButton
                            onClick={() =>
                                wrapSelection('**', '**', 'bold text')
                            }
                        >
                            Bold
                        </EditorButton>
                        <EditorButton
                            onClick={() =>
                                wrapSelection('*', '*', 'italic text')
                            }
                        >
                            Italic
                        </EditorButton>
                        <EditorButton
                            onClick={() => insertBlock('> Important note')}
                        >
                            Quote
                        </EditorButton>
                        <EditorButton
                            onClick={() => insertBlock('- List item')}
                        >
                            List
                        </EditorButton>
                    </div>
                    <textarea
                        ref={bodyRef}
                        value={form.data.body}
                        onChange={(event) =>
                            form.setData('body', event.target.value)
                        }
                        required
                        className="h-80 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                    />
                </Field>

{tagOptions.length > 0 ? (
                    <div className="space-y-2">
                        <p className="text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                            Tags
                        </p>
                        <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                            {tagOptions.map((tag) => (
                                <label
                                    key={tag.id}
                                    className="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-[#0a1530] dark:border-[#3c2b68] dark:text-[#e5dcff]"
                                >
                                    <input
                                        type="checkbox"
                                        checked={form.data.tag_ids.includes(
                                            tag.id,
                                        )}
                                        onChange={(event) =>
                                            toggleTag(
                                                tag.id,
                                                event.target.checked,
                                            )
                                        }
                                    />
                                    {tag.name}
                                </label>
                            ))}
                        </div>
                    </div>
                ) : null}

<div className="grid gap-4 md:grid-cols-2">
                    <Field label="SEO Title" error={form.errors.seo_title}>
                        <input
                            value={form.data.seo_title}
                            onChange={(event) =>
                                form.setData('seo_title', event.target.value)
                            }
                            className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                        />
                    </Field>
                    <Field
                        label="Meta Description"
                        error={form.errors.meta_description}
                    >
                        <textarea
                            value={form.data.meta_description}
                            onChange={(event) =>
                                form.setData(
                                    'meta_description',
                                    event.target.value,
                                )
                            }
                            className="h-20 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                        />
                    </Field>
                </div>

<button
                    type="submit"
                    disabled={form.processing}
                    className="rounded-lg bg-[#0b7285] px-4 py-2 text-sm font-semibold text-white hover:bg-[#095f6f] disabled:opacity-50 dark:bg-[#7c3aed] dark:hover:bg-[#8b5cf6]"
                >
                    Save Article
                </button>
            </form>
        </div>
    );
}

export function transformArticleForm(data: BlogArticleForm) {
    return {
        ...data,
        blog_category_id:
            data.blog_category_id === '' ? null : Number(data.blog_category_id),
        user_id: Number(data.user_id),
        slug: data.slug === '' ? null : data.slug,
        excerpt: data.excerpt === '' ? null : data.excerpt,
        seo_title: data.seo_title === '' ? null : data.seo_title,
        meta_description:
            data.meta_description === '' ? null : data.meta_description,
        published_at: data.published_at === '' ? null : data.published_at,
    };
}