43 lines
1.2 KiB
TypeScript
Executable File
43 lines
1.2 KiB
TypeScript
Executable File
import React, {ReactNode} from 'react';
|
|
import {IllustratedMessage} from '../../ui/images/illustrated-message';
|
|
import {SvgImage} from '../../ui/images/svg-image/svg-image';
|
|
import {Trans} from '../../i18n/trans';
|
|
import {useIsMobileMediaQuery} from '../../utils/hooks/is-mobile-media-query';
|
|
|
|
export interface DataTableEmptyStateMessageProps {
|
|
isFiltering?: boolean;
|
|
title: ReactNode;
|
|
filteringTitle?: ReactNode;
|
|
image: string;
|
|
size?: 'sm' | 'md';
|
|
className?: string;
|
|
}
|
|
export function DataTableEmptyStateMessage({
|
|
isFiltering,
|
|
title,
|
|
filteringTitle,
|
|
image,
|
|
size,
|
|
className,
|
|
}: DataTableEmptyStateMessageProps) {
|
|
const isMobile = useIsMobileMediaQuery();
|
|
if (!size) {
|
|
size = isMobile ? 'sm' : 'md';
|
|
}
|
|
|
|
// allow user to disable filtering message variation by not passing in "filteringTitle"
|
|
return (
|
|
<IllustratedMessage
|
|
className={className}
|
|
size={size}
|
|
image={<SvgImage src={image} />}
|
|
title={isFiltering && filteringTitle ? filteringTitle : title}
|
|
description={
|
|
isFiltering && filteringTitle ? (
|
|
<Trans message="Try another search query or different filters" />
|
|
) : undefined
|
|
}
|
|
/>
|
|
);
|
|
}
|