Scroll-to-Top button

public/data/elijahlowe77.json

@@ -0,0 +1,13 @@
+{
+  "name": "Elijah",
+  "location": "University of Florida",
+  "bio": "I love everything about digital visualization, currently learning react, ruby on rails, but most proficient in C# with unity",
+  "avatar": "https://github.com/elijahlowe77.png",
+  "portfolio": "https://github.com/elijahlowe77",
+  "skills": ["Unity", "REACT"],
+  "social": {
+    "GitHub": "https://github.com/elijahlowe77",
+    "Twitter": "https://twitter.com/REDACTED",
+    "LinkedIn": "https://www.linkedin.com/in/elijah-lowe-54105821a/"
+  }
+}

src/App.js

@@ -8,6 +8,7 @@ import NoResultFound from './components/NoResultFound/NoResultFound';
 import Pagination from './components/Pagination/Pagination';
 import './App.css';
 import filenames from './ProfilesList.json';
+import PageUp from "./components/PageUp/PageUp.jsx"; 
 
 function App() {
   const profilesRef = useRef();
@@ -133,7 +134,8 @@ function App() {
       <Sidebar />
       <div className="w-full pl-5 pr-4 md:h-screen md:w-[77%] md:overflow-y-scroll md:py-7" ref={profilesRef}>
         <Search onSearch={handleSearch} />
-        {profiles.length === 0 && searching ? <NoResultFound /> : renderProfiles()}
+        {profiles.length === 0 && searching ? <NoResultFound /> : renderProfiles()} 
+        <PageUp />
         {(searching ? profiles.length : shuffledProfiles.length) > 0 && (
           <Pagination
             currentPage={currentPage}

src/ProfilesList.json

@@ -442,5 +442,6 @@
   "Sanket176.json",
   "Om-pawarr.json",
   "boytur.json",
-  "giuliarappo.json"
+  "giuliarappo.json", 
+   "elijahlowe77.json"
 ]

src/components/PageUp/PageUp.jsx

@@ -0,0 +1,18 @@
+import react from "react";
+
+function PageUp() {
+  //creating function outside of return to keep code readibility
+  const top = () => {
+    window.scrollTo(0, 0);
+  };
+  return (
+    //using same classNames as buttons from Pagination component to maintain formatting
+    <div className="flex items-center justify-center gap-12">
+      <button className="focus:outline-none disabled:opacity-30" onClick={top}>
+        Top
+      </button>
+    </div>
+  );
+}
+
+export default PageUp;