import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input'; import { FormGroup } from '@admin/components/ui/forms/form-group'; import { formClassName, formHelpClassName } from '@admin/components/ui/field-styles'; import { useFormResponse } from '@admin/hooks/use-form-response'; import { useSingletonPermissions } from '@admin/hooks/use-singleton-permissions'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import { cn } from '@admin/lib/utils'; import { Head, useForm } from '@inertiajs/react'; import { FormEvent } from 'react'; type BreadcrumbPage = { key: string; label: string; image_only: boolean; title: string; image: string; }; type EditBreadcrumbsProps = { pages: BreadcrumbPage[]; }; function mediaUrl(path: string): string { if (!path) { return '/assets/images/breadcrumb/breadcrumb.jpg'; } if (path.startsWith('/') || path.startsWith('http')) { return path; } return `/storage/${path}`; } function EditBreadcrumbs({ pages }: EditBreadcrumbsProps) { const { canEdit } = useSingletonPermissions('page-breadcrumb'); const { data, setData, put, processing, errors } = useForm({ pages }); const action = useFormResponse({ loadingMessage: 'Saving breadcrumbs...' }); const updatePage = (index: number, field: 'title' | 'image', value: string) => { const next = data.pages.map((page, pageIndex) => (pageIndex === index ? { ...page, [field]: value } : page)); setData('pages', next); }; const handleSubmit = (event: FormEvent) => { event.preventDefault(); put('/admin/api/page_breadcrumbs', { onStart: action.onStart, onSuccess: action.onSuccess, onError: action.onError, preserveScroll: true, }); }; return ( <>

Each page banner uses a 1920×495 px photo. Room details keeps the room type as its heading. Its parent link uses the Rooms & Suites title.

{data.pages.map((page, index) => (
{page.label}
{!page.image_only && ( updatePage(index, 'title', event.target.value), required: true, }} /> )} {page.image_only && (

The heading is the room type name.

)} updatePage(index, 'image', filename)} />
))} {canEdit && ( )}
); } export default Object.assign(EditBreadcrumbs, { layout: dashboardPersistentLayout('Breadcrumbs', 'Banner title and background for each public page'), });