feat(task-list): enhance empty state display in task list component
- Added EmptyListPlaceholder component to visually represent the empty state in the task list. - Adjusted styling and layout for the empty group drop zone to improve user experience. - Removed unused progress properties from the task group data structure for cleaner code.
This commit is contained in:
@@ -1,17 +1,24 @@
|
||||
import { Empty, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type EmptyListPlaceholderProps = {
|
||||
imageSrc?: string;
|
||||
imageHeight?: number;
|
||||
text: string;
|
||||
text?: string;
|
||||
textKey?: string;
|
||||
i18nNs?: string;
|
||||
};
|
||||
|
||||
const EmptyListPlaceholder = ({
|
||||
imageSrc = 'https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp',
|
||||
imageHeight = 60,
|
||||
text,
|
||||
textKey,
|
||||
i18nNs = 'task-list-table',
|
||||
}: EmptyListPlaceholderProps) => {
|
||||
const { t } = useTranslation(i18nNs);
|
||||
const description = textKey ? t(textKey) : text;
|
||||
return (
|
||||
<Empty
|
||||
image={imageSrc}
|
||||
@@ -22,7 +29,7 @@ const EmptyListPlaceholder = ({
|
||||
alignItems: 'center',
|
||||
marginBlockStart: 24,
|
||||
}}
|
||||
description={<Typography.Text type="secondary">{text}</Typography.Text>}
|
||||
description={<Typography.Text type="secondary">{description}</Typography.Text>}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user