-
Notifications
You must be signed in to change notification settings - Fork 198
/
empty-state.component.tsx
44 lines (41 loc) · 1.43 KB
/
empty-state.component.tsx
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
import React from 'react';
import { Layer, Button, Tile } from '@carbon/react';
import { Trans, useTranslation } from 'react-i18next';
import { EmptyDataIllustration } from './empty-data-illustration.component';
import { useLayoutType } from '@openmrs/esm-framework';
import styles from './empty-state.scss';
import { Add } from '@carbon/react/icons';
export interface EmptyStateProps {
displayText: string;
headerTitle: string;
launchForm?(): void;
scheduleType: string;
}
export const EmptyState: React.FC<EmptyStateProps> = ({ headerTitle, displayText, launchForm, scheduleType }) => {
const { t } = useTranslation();
const isTablet = useLayoutType() === 'tablet';
return (
<Layer>
<Tile className={styles.tile}>
<div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
<h4>{headerTitle}</h4>
</div>
<EmptyDataIllustration />
<p className={styles.content}>
{t('emptyStateText', 'There are no {{displayText}} to display', { displayText })}
</p>
{scheduleType === 'Scheduled' ? (
<p className={styles.action}>
{launchForm && (
<span>
<Button renderIcon={Add} kind="ghost" onClick={() => launchForm()}>
{t('createAppointment', 'Create appointment')}
</Button>
</span>
)}
</p>
) : null}
</Tile>
</Layer>
);
};