Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Notifications): added errorTitle and emptyTitle props #136

Merged
merged 1 commit into from
Jan 30, 2024
Merged

fix(Notifications): added errorTitle and emptyTitle props #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions src/components/Notifications/Notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,21 @@ export const Notifications = React.memo(function Notifications(props: Notificati
</InfiniteScroll>
);
} else if (props.errorContent) {
content = <NotificationsErrorState image={props.errorImage} content={props.errorContent} />;
content = (
<NotificationsErrorState
image={props.errorImage}
title={props.errorTitle}
content={props.errorContent}
/>
);
} else {
content = <NotificationsEmptyState image={props.emptyImage} content={props.emptyContent} />;
content = (
<NotificationsEmptyState
image={props.emptyImage}
title={props.emptyTitle}
content={props.emptyContent}
/>
);
}

return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/Notifications/NotificationsEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ const b = block('notifications');

const nothingFoundSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="172" height="172" fill="none"><path d="M0 0h172v172H0z"/><path fill="#ECF2F9" fill-rule="evenodd" d="M138.82 73.223c4.092-6.182 6.138-14.192 6.138-24.074 0-14.975-5.094-26.947-15.367-35.784C119.404 4.44 102.165 0 83.141 0c-5.703 0-10.492.392-15.15 1.175-4.658.784-8.75 1.698-12.276 2.743-2.351.697-7.01 2.481-10.144 3.744-1.785.74-3.003 2.612-3.003 4.702v17.195c0 3.57 3.395 6.008 6.486 4.571.268-.12.53-.24.786-.356 1.03-.468 1.938-.88 2.566-1.124 2.481-1.001 5.398-1.828 8.75-2.525 3.352-.697 7.096-1.045 11.188-1.045 9.665 0 18.763 2.177 22.768 6.487 4.005 4.353 6.008 9.795 6.008 16.325 0 5.659-1.176 10.491-3.57 14.453-2.394 3.961-5.703 7.836-9.969 11.536a438.068 438.068 0 0 0-9.577 8.62 48.083 48.083 0 0 0-7.619 9.011c-2.133 3.265-3.787 6.965-4.919 11.014-.697 2.438-1.175 8.837-1.437 13.495-.13 2.874 1.96 5.311 4.659 5.311h22.289c2.35 0 4.353-1.915 4.614-4.44.261-2.481.87-5.442 2.394-7.749 1.742-2.568 3.788-5.137 6.4-7.531 2.612-2.395 5.659-4.789 9.098-7.27 3.483-2.438 7.053-5.268 10.84-8.446 5.572-4.963 10.405-10.491 14.497-16.673Zm-72.963 92.595c3.918 4.136 8.75 6.182 14.54 6.182a18.59 18.59 0 0 0 7.923-1.741c2.526-1.132 4.746-2.612 6.618-4.484 1.871-1.872 3.352-4.092 4.44-6.617 1.088-2.525 1.611-5.268 1.611-8.272 0-2.96-.523-5.746-1.611-8.271a22.497 22.497 0 0 0-4.44-6.704c-1.872-1.959-4.093-3.439-6.618-4.484a20.57 20.57 0 0 0-7.922-1.567c-5.79 0-10.623 2.002-14.54 6.051-3.919 4.048-5.878 9.055-5.878 15.019 0 5.833 1.96 10.796 5.877 14.888Z" clip-rule="evenodd"/><path stroke="#00E6C5" stroke-dasharray="5.75 5.75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M98.16 153.586H13.923c-4.353 0-7.923-3.57-7.923-7.923V91.072c0-4.354 3.57-7.923 7.923-7.923H98.16c4.353 0 7.923 3.57 7.923 7.923v54.591c0 4.396-3.57 7.923-7.923 7.923Z" clip-rule="evenodd"/><path fill="#2EE5C0" d="M15.675 93.167a1.792 1.792 0 1 0 0-3.584 1.792 1.792 0 0 0 0 3.584ZM21.408 93.167a1.792 1.792 0 1 0 0-3.583 1.792 1.792 0 0 0 0 3.583ZM27.142 93.167a1.792 1.792 0 1 0 0-3.584 1.792 1.792 0 0 0 0 3.584Z"/><path stroke="#00E6C5" stroke-dasharray="5.75 5.75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.583 99.259h96.034"/><path fill="#027BF3" d="m136.078 115.189-94.424 5.224c-3.178.174-5.79-2.263-5.79-5.441V42.097c0-3.178 2.612-5.616 5.79-5.442l94.424 5.224c2.437.13 4.396 2.482 4.396 5.224v62.862c0 2.743-1.959 5.094-4.396 5.224Z"/><path fill="#fff" fill-rule="evenodd" d="M44.397 46.885c1.48.087 2.655-1.044 2.655-2.524s-1.175-2.743-2.655-2.787A2.504 2.504 0 0 0 41.74 44.1c0 1.48 1.175 2.743 2.656 2.786Zm8.619.349a2.52 2.52 0 0 0 2.612-2.525c0-1.437-1.175-2.656-2.612-2.743a2.52 2.52 0 0 0-2.612 2.525c0 1.437 1.175 2.7 2.612 2.743Zm10.97-2.134c0 1.437-1.131 2.569-2.524 2.482-1.394-.044-2.569-1.263-2.569-2.7 0-1.436 1.132-2.568 2.569-2.48 1.392.043 2.524 1.262 2.524 2.698Zm27.918 28.097 7.034-7.782 6.408 7.112-6.96 7.782 6.96 7.633-6.408 7.26-7.034-7.632-7.144 8.005-6.666-7.112 7.218-8.005-7.218-7.82 6.666-7.26 7.144 7.819Z" clip-rule="evenodd"/><path fill="#67B0F8" d="M147.57 49.019c0-12.364-9.446-16.151-14.583-16.5-.044 0-14.584 1.002-14.584 19.721 0 11.101 9.229 19.808 20.025 19.416 3.396-.13 6.487-1.132 9.142-2.786V49.019Z"/><path fill="#FF4645" d="M170.686 85.195c-1.262 1.48-3.308 1.61-4.571.348l-16.804-16.978 4.92-5.31 16.455 16.977c1.263 1.306 1.263 3.483 0 4.963Z"/><path fill="#D93654" d="m154.274 63.297-4.92 5.311 1.611 1.611c.827.827 2.133.87 2.96.087.479-.435.958-.914 1.393-1.393.262-.305.566-.61.828-.914a2.14 2.14 0 0 0-.131-2.873l-1.741-1.829Z"/><path fill="#00236B" fill-rule="evenodd" d="M121.537 66.998c-10.013-9.316-10.013-24.945 0-34 9.534-8.62 23.987-7.4 32.389 1.872 8.01 8.881 8.01 22.507 0 31.17-8.402 9.055-22.855 9.839-32.389.958Zm4.092-4.702c6.791 6.53 17.326 6.182 23.552-.392 6.007-6.356 6.007-16.455 0-22.985-6.226-6.748-16.761-7.4-23.552-1.089-7.052 6.574-7.052 17.718 0 24.466Z" clip-rule="evenodd"/><path fill="#2EE5C0" d="M23.02 18.502a1 1 0 1 0-2 0h2Zm-2 3.613a1 1 0 1 0 2 0h-2Zm2 7.488a1 1 0 1 0-2 0h2Zm-2 3.874a1 1 0 1 0 2 0h-2Zm8.488-6.488a1 1 0 1 0 0-2v2Zm-3.57-2a1 1 0 0 0 0 2v-2Zm-7.793 2a1 1 0 1 0 0-2v2Zm-3.57-2a1 1 0 1 0 0 2v-2Zm6.445-6.487v3.613h2v-3.613h-2Zm0 11.1v3.875h2v-3.874h-2Zm8.488-4.613h-3.57v2h3.57v-2Zm-11.363 0h-3.57v2h3.57v-2Z"/></svg>`;

type Props = {image?: React.ReactNode; content: React.ReactNode};
type Props = {image?: React.ReactNode; title?: React.ReactNode; content?: React.ReactNode};

export const NotificationsEmptyState = React.memo(function NotificationsEmptyState(props: Props) {
return (
<div className={b('empty')}>
{props.image ? props.image : <Icon data={nothingFoundSvg} size={172} />}
<div className={b('empty-message')}>
<div className={b('empty-title')}>{i18n('no-notifications')}</div>
<div className={b('empty-title')}>{props.title || i18n('no-notifications')}</div>
{props.content ? (
<div className={b('empty-message-content')}>{props.content}</div>
) : null}
Expand Down
Loading
Loading