diff --git a/packages/core/upload/admin/src/components/PaginationFooter/index.js b/packages/core/upload/admin/src/components/PaginationFooter/index.js
new file mode 100644
index 0000000000..7387ae50e6
--- /dev/null
+++ b/packages/core/upload/admin/src/components/PaginationFooter/index.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Row } from '@strapi/parts';
+import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
+
+export const PaginationFooter = ({ pagination }) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+PaginationFooter.defaultProps = {
+ pagination: {
+ pageCount: 0,
+ pageSize: 10,
+ total: 0,
+ },
+};
+
+PaginationFooter.propTypes = {
+ pagination: PropTypes.shape({
+ page: PropTypes.number,
+ pageCount: PropTypes.number,
+ pageSize: PropTypes.number,
+ total: PropTypes.number,
+ }),
+};
diff --git a/packages/core/upload/admin/src/pages/App/components/ListView.js b/packages/core/upload/admin/src/pages/App/components/ListView.js
index 3c35313d2e..31af2784c4 100644
--- a/packages/core/upload/admin/src/pages/App/components/ListView.js
+++ b/packages/core/upload/admin/src/pages/App/components/ListView.js
@@ -7,50 +7,57 @@ import { ImageAssetCard } from '../../../components/AssetCard/ImageAssetCard';
import { VideoAssetCard } from '../../../components/AssetCard/VideoAssetCard';
import { DocAssetCard } from '../../../components/AssetCard/DocAssetCard';
import { AssetType } from '../../../constants';
+import { PaginationFooter } from '../../../components/PaginationFooter';
export const ListView = ({ assets }) => {
return (
-
-
- {assets.map(asset => {
- if (asset.mime.includes(AssetType.Video)) {
+ <>
+
+
+ {assets.map(asset => {
+ if (asset.mime.includes(AssetType.Video)) {
+ return (
+
+ );
+ }
+
+ if (asset.mime.includes(AssetType.Image)) {
+ return (
+
+ );
+ }
+
return (
-
);
- }
+ })}
+
+
- if (asset.mime.includes(AssetType.Image)) {
- return (
-
- );
- }
-
- return (
-
- );
- })}
-
-
+
+ >
);
};