diff --git a/package-lock.json b/package-lock.json index 0f5f4c2d..e09f48e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", + "react-sticky-el": "^2.0.9", "web-vitals": "^2.1.3" }, "devDependencies": { @@ -17910,6 +17911,15 @@ "node": ">=10" } }, + "node_modules/react-sticky-el": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/react-sticky-el/-/react-sticky-el-2.0.9.tgz", + "integrity": "sha512-JFjFWlaB7gn5bszZlRQ/VKxK3zHiViJdn0EhQ/6WImun5Xbx3OMUX2rirr0QLSEo27dwvoSE4HkIFr30QAScfg==", + "peerDependencies": { + "react": ">=16.3.0", + "react-dom": ">=16.3.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -33786,6 +33796,12 @@ } } }, + "react-sticky-el": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/react-sticky-el/-/react-sticky-el-2.0.9.tgz", + "integrity": "sha512-JFjFWlaB7gn5bszZlRQ/VKxK3zHiViJdn0EhQ/6WImun5Xbx3OMUX2rirr0QLSEo27dwvoSE4HkIFr30QAScfg==", + "requires": {} + }, "react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", diff --git a/package.json b/package.json index dad5e241..6542d75a 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", + "react-sticky-el": "^2.0.9", "web-vitals": "^2.1.3" }, "devDependencies": { diff --git a/src/components/Explore.jsx b/src/components/Explore.jsx index 20ca482c..467b65b5 100644 --- a/src/components/Explore.jsx +++ b/src/components/Explore.jsx @@ -5,6 +5,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import RepoCard from './RepoCard.jsx'; import Loading from './Loading'; import Typography from '@mui/material/Typography'; +import Sticky from 'react-sticky-el'; import Alert from '@mui/material/Alert'; import { Container, FormControl, Grid, InputLabel, MenuItem, Select, Stack } from '@mui/material'; @@ -258,7 +259,7 @@ function Explore() { - {renderFilterCards()} + {renderFilterCards()} {!(exploreData && exploreData.length) && !isLoading ? (