diff --git a/packages/console/src/assets/images/social-connectors-placeholder.svg b/packages/console/src/assets/images/social-connectors-placeholder.svg deleted file mode 100644 index 6cfcf2665..000000000 --- a/packages/console/src/assets/images/social-connectors-placeholder.svg +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/console/src/assets/images/table-empty.svg b/packages/console/src/assets/images/table-empty.svg new file mode 100644 index 000000000..f9594cd59 --- /dev/null +++ b/packages/console/src/assets/images/table-empty.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/components/Table/TableEmpty.module.scss b/packages/console/src/components/Table/TableEmpty.module.scss new file mode 100644 index 000000000..8cace5fed --- /dev/null +++ b/packages/console/src/components/Table/TableEmpty.module.scss @@ -0,0 +1,17 @@ +@use '@/scss/underscore' as _; + +.tableEmpty { + padding: _.unit(4) 0; + text-align: center; + + .title { + font: var(--font-subhead-2); + margin-bottom: _.unit(2); + } + + .content { + font: var(--font-body-2); + color: var(--color-neutral-50); + margin-bottom: _.unit(2); + } +} diff --git a/packages/console/src/components/Table/TableEmpty.tsx b/packages/console/src/components/Table/TableEmpty.tsx new file mode 100644 index 000000000..b7a95db6e --- /dev/null +++ b/packages/console/src/components/Table/TableEmpty.tsx @@ -0,0 +1,33 @@ +import React, { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import EmptyImage from '@/assets/images/table-empty.svg'; + +import * as styles from './TableEmpty.module.scss'; + +type Props = { + title?: string; + content?: string; + children?: ReactNode; +}; + +const TableEmpty = ({ title, content, children }: Props) => { + const { t } = useTranslation(); + + return ( + + +
+
+ +
+
{title ?? t('admin_console.errors.empty')}
+ {content &&
{content}
} + {children} +
+ + + ); +}; + +export default TableEmpty; diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx index b1214e036..b83cd2fac 100644 --- a/packages/console/src/pages/ApiResources/index.tsx +++ b/packages/console/src/pages/ApiResources/index.tsx @@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle'; import CopyToClipboard from '@/components/CopyToClipboard'; import ImagePlaceholder from '@/components/ImagePlaceholder'; import ItemPreview from '@/components/ItemPreview'; +import TableEmpty from '@/components/Table/TableEmpty'; import TableError from '@/components/Table/TableError'; import TableLoading from '@/components/Table/TableLoading'; import { RequestError } from '@/hooks/use-api'; @@ -80,6 +81,17 @@ const ApiResources = () => { /> )} {isLoading && } + {data?.length === 0 && ( + +