feat: add avatar email fallback

This commit is contained in:
David Nguyen
2023-09-11 16:58:41 +10:00
committed by Mythie
parent 41d46c82d1
commit 48e58d4675
6 changed files with 20 additions and 18 deletions

View File

@ -15,7 +15,7 @@ export type StackAvatarProps = {
type: 'unsigned' | 'waiting' | 'opened' | 'completed';
};
export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
export const StackAvatar = ({ first, zIndex, fallbackText = '', type }: StackAvatarProps) => {
let classes = '';
let zIndexClass = '';
const firstClass = first ? '' : '-ml-3';
@ -48,7 +48,7 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
${firstClass}
dark:border-border h-10 w-10 border-2 border-solid border-white`}
>
<AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
<AvatarFallback className={classes}>{fallbackText}</AvatarFallback>
</Avatar>
);
};

View File

@ -1,4 +1,4 @@
import { initials } from '@documenso/lib/client-only/recipient-initials';
import { recipientAvatarFallback } from '@documenso/lib/client-only/recipient-avatar-fallback';
import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
import { Recipient } from '@documenso/prisma/client';
import {
@ -56,7 +56,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
fallbackText={initials(recipient.name)}
fallbackText={recipientAvatarFallback(recipient)}
/>
<span className="text-sm text-gray-500">{recipient.email}</span>
</div>
@ -73,7 +73,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
fallbackText={initials(recipient.name)}
fallbackText={recipientAvatarFallback(recipient)}
/>
<span className="text-sm text-gray-500">{recipient.email}</span>
</div>
@ -90,7 +90,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
fallbackText={initials(recipient.name)}
fallbackText={recipientAvatarFallback(recipient)}
/>
<span className="text-sm text-gray-500">{recipient.email}</span>
</div>
@ -107,7 +107,7 @@ export const StackAvatarsWithTooltip = ({
first={true}
key={recipient.id}
type={getRecipientType(recipient)}
fallbackText={initials(recipient.name)}
fallbackText={recipientAvatarFallback(recipient)}
/>
<span className="text-sm text-gray-500">{recipient.email}</span>
</div>

View File

@ -1,6 +1,6 @@
import React from 'react';
import { initials } from '@documenso/lib/client-only/recipient-initials';
import { recipientAvatarFallback } from '@documenso/lib/client-only/recipient-avatar-fallback';
import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
import { Recipient } from '@documenso/prisma/client';
@ -26,7 +26,7 @@ export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
first={first}
zIndex={String(zIndex - index * 10)}
type={lastItemText && index === 4 ? 'unsigned' : getRecipientType(recipient)}
fallbackText={lastItemText ? lastItemText : initials(recipient.name)}
fallbackText={lastItemText ? lastItemText : recipientAvatarFallback(recipient)}
/>
);
});