mirror of
https://github.com/documenso/documenso.git
synced 2025-11-19 19:21:39 +10:00
feat: add empty state for different status
This commit is contained in:
committed by
Mythie
parent
5aff50b13b
commit
4879d2360b
46
apps/web/src/app/(dashboard)/documents/empty-state.tsx
Normal file
46
apps/web/src/app/(dashboard)/documents/empty-state.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user