// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
// SPDX-License-Identifier: Apache-2.0
import { Alert, Anchor } from '@mantine/core';
import type { ResourceType } from '@medplum/fhirtypes';
import { Document, QuestionnaireForm, useResource } from '@medplum/react';
import { IconAlertCircle } from '@tabler/icons-react';
import type { JSX } from 'react';
import { useParams } from 'react-router';
export function PreviewPage(): JSX.Element | null {
const { resourceType, id } = useParams() as { resourceType: ResourceType; id: string };
const resource = useResource({ reference: resourceType + '/' + id });
if (!resource) {
return null;
}
return (
<Document>
<Alert icon={<IconAlertCircle size={16} />} mb="xl">
This is just a preview! Access your form here:
<br />
<Anchor href={`/forms/${id}`}>{`/forms/${id}`}</Anchor>
</Alert>
<QuestionnaireForm
questionnaire={{ reference: resourceType + '/' + id }}
onSubmit={() => alert('You submitted the preview')}
/>
</Document>
);
}
