created: monorepo with front & back

frontend/src/components/PaginatedCardGrid.jsx

@@ -0,0 +1,24 @@
+import LoadingIcon from './LoadingIcon';
+
+const PaginatedCardGrid = ({
+  items = [],
+  renderCard,
+  creatingItem = null,
+  renderCreatingCard = null,
+  loaderRef,
+  loading = false
+}) => {
+  return (
+    <div className="cards-grid">
+      {creatingItem && renderCreatingCard && renderCreatingCard()}
+
+      {items.map((item, i) => renderCard(item, i))}
+
+      <div ref={loaderRef} className="loading-trigger d-flex justify-content-center align-items-center">
+        {loading && <LoadingIcon />}
+      </div>
+    </div>
+  );
+};
+
+export default PaginatedCardGrid;