feat: add empty state for different status

This commit is contained in:
Ephraim Atta-Duncan
2023-09-06 11:47:58 +00:00
committed by Mythie
parent 5aff50b13b
commit 4879d2360b
2 changed files with 48 additions and 16 deletions

View File

@ -0,0 +1,46 @@
import { ArrowRight, CheckCircle2 } from 'lucide-react';
export default function EmptyDocumentState({ status }: { status: string }) {
let headerText = 'All done';
let bodyText = 'All documents signed for now.';
let extraText = '';
let showArrow = false;
switch (status) {
case 'COMPLETED':
headerText = 'Nothing here';
bodyText = 'There are no signed documents yet.';
extraText = 'Start by adding a document';
showArrow = true;
break;
case 'DRAFT':
headerText = 'Nothing here';
bodyText = 'There are no drafts yet.';
extraText = 'Start by adding a document';
showArrow = true;
break;
case 'ALL':
headerText = 'Nothing here';
bodyText = 'There are no documents yet.';
extraText = 'Start by adding a document';
showArrow = true;
break;
default:
break;
}
return (
<div className="text-muted-foreground/50 flex h-96 flex-col items-center justify-center space-y-3">
<CheckCircle2 className="text-muted-foreground/50 h-14 w-14" />
<div className="text-center">
<h3 className="text-lg font-semibold">{headerText}</h3>
<p>{bodyText}</p>
{extraText && (
<p>
{extraText} {showArrow && <ArrowRight className="inline h-4 w-4" />}
</p>
)}
</div>
</div>
);
}