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 FooterPayload = { background_image: string; blurb: string; }; type EditFooterProps = { footer: FooterPayload; exists: boolean; }; function EditFooter({ footer, exists }: EditFooterProps) { const { canEdit } = useSingletonPermissions('footer-setting'); const { data, setData, put, processing, errors } = useForm(footer); const action = useFormResponse({ loadingMessage: exists ? 'Saving changes...' : 'Saving footer...', }); const handleSubmit = (event: FormEvent) => { event.preventDefault(); put('/admin/api/footer_settings', { onStart: action.onStart, onSuccess: action.onSuccess, onError: action.onError, preserveScroll: true, }); }; return ( <>

The background sits behind the public footer. The text appears under the logo.

setData('background_image', filename)} /> setData('blurb', event.target.value), }} /> {canEdit && ( )} {!canEdit &&

You do not have permission to edit the footer.

}
); } export default Object.assign(EditFooter, { layout: dashboardPersistentLayout('Footer', 'Background photo and the text under the logo'), });