47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|