Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-16 17:51:49 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: tidy messaging

Browse Source
This commit is contained in:
Lucas Smith
2023-09-09 03:45:15 +00:00
parent 73b0dc315e
commit 2bad1b9f55
1 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web/src/app/(dashboard)/documents/empty-state.tsx
View File

@ -1,4 +1,4 @@
import { ArrowRight, CheckCircle2 } from 'lucide-react'; import { ArrowRight, Bird, CheckCircle2 } from 'lucide-react';
import { match } from 'ts-pattern'; import { match } from 'ts-pattern';
import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status'; import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
@ -6,43 +6,44 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
export type EmptyDocumentProps = { status: ExtendedDocumentStatus }; export type EmptyDocumentProps = { status: ExtendedDocumentStatus };
export default function EmptyDocumentState({ status }: EmptyDocumentProps) { export default function EmptyDocumentState({ status }: EmptyDocumentProps) {
const { headerText, bodyText, extraText, showArrow } = match(status) const {
title,
message,
icon: Icon,
} = match(status)
.with(ExtendedDocumentStatus.COMPLETED, () => ({ .with(ExtendedDocumentStatus.COMPLETED, () => ({
headerText: 'Nothing here', title: 'Nothing to do',
bodyText: 'There are no signed documents yet.', message:
extraText: 'Start by adding a document', 'There are no completed documents yet. Documents that you have created or received that become completed will appear here later.',
showArrow: true, icon: CheckCircle2,
})) }))
.with(ExtendedDocumentStatus.DRAFT, () => ({ .with(ExtendedDocumentStatus.DRAFT, () => ({
headerText: 'Nothing here', title: 'No active drafts',
bodyText: 'There are no drafts yet.', message:
extraText: 'Start by adding a document', 'There are no active drafts at then current moment. You can upload a document to start drafting.',
showArrow: true, icon: CheckCircle2,
})) }))
.with(ExtendedDocumentStatus.ALL, () => ({ .with(ExtendedDocumentStatus.ALL, () => ({
headerText: 'Nothing here', title: "We're all empty",
bodyText: 'There are no documents yet.', message:
extraText: 'Start by adding a document', 'You have not yet created or received any documents. To create a document please upload one.',
showArrow: true, icon: Bird,
})) }))
.otherwise(() => ({ .otherwise(() => ({
headerText: 'All done', title: 'Nothing to do',
bodyText: 'All documents signed for now.', message:
extraText: '', 'All documents are currently actioned. Any new documents are sent or recieved they will start to appear here.',
showArrow: false, icon: CheckCircle2,
})); }));
return ( return (
<div className="text-muted-foreground/50 flex h-96 flex-col items-center justify-center space-y-3"> <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
<CheckCircle2 className="text-muted-foreground/50 h-12 w-12" strokeWidth={1.5} /> <Icon className="h-12 w-12" strokeWidth={1.5} />
<div className="text-center"> <div className="text-center">
<h3 className="text-lg font-semibold">{headerText}</h3> <h3 className="text-lg font-semibold">{title}</h3>
<p>{bodyText}</p>
{extraText && ( <p className="mt-2 max-w-[60ch]">{message}</p>
<p>
{extraText} {showArrow && <ArrowRight className="inline h-4 w-4" />}
</p>
)}
</div> </div>
</div> </div>
); );