Merge pull request #408 from tkshsbcue/Top-Button

Added:To The Top Button
SUGAM-ARORA · Jul 1, 2024 · 6cfc214 · 6cfc214
2 parents b59b8a6 + e232618
commit 6cfc214
Show file tree

Hide file tree

Showing 2 changed files with 1,262 additions and 256 deletions.
diff --git a/src/Components/CardMain.js b/src/Components/CardMain.js
@@ -1,11 +1,13 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { BsFillHeartFill } from "react-icons/bs";
 import { Link } from "react-router-dom";
 import { features } from "./projects";
 
-function CardMain({ imgSrc, title, hearts }) {
+function CardMain() {
   const [isVisible, setIsVisible] = useState(new Array(features.length).fill(false));
+  const containerRef = useRef(null);
   let hideTimeout;
+
   useEffect(() => {
     return () => {
       clearTimeout(hideTimeout);
@@ -15,94 +17,117 @@ function CardMain({ imgSrc, title, hearts }) {
   const handleMouseOver = (index) => {
     clearTimeout(hideTimeout);
     setIsVisible((prevIsVisible) => {
-      prevIsVisible[index] = true;
-      return [...prevIsVisible];
+      const newIsVisible = [...prevIsVisible];
+      newIsVisible[index] = true;
+      return newIsVisible;
     });
   };
 
   const handleMouseOut = (index) => {
     hideTimeout = setTimeout(() => {
       setIsVisible((prevIsVisible) => {
-        prevIsVisible[index] = false;
-        return [...prevIsVisible];
+        const newIsVisible = [...prevIsVisible];
+        newIsVisible[index] = false;
+        return newIsVisible;
       });
     }, 200);
   };
 
+  const scrollToTop = () => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
   return (
-    <div className="card">
-    { features.map((project,index)=>
-    <div className="card_main" key={index}>
-      <img src={project.img} alt="" className="card_main_img" title={project.title} />
-      <div className="card_main_name">
-        <h2>{project.title}</h2>
-        <div className="card_main_icon">
-          <i>
-            <BsFillHeartFill /> <span>{project.hearts}</span>
-          </i>
-        </div>
-      </div>
-      <div className="stat">
-        <div>
-          <p>
-            Developer<span>X</span>
-          </p>
-        </div>
-        <div>
-          <p>
-            Uploaded On<span>dd:mm:yy</span>
-          </p>
-        </div>
-      </div>
-      <div className="author">
-        <div className="nameAuthor">
-          <p>By : &nbsp; </p>
-          <p
-        id="author_name"
-        onMouseOver={() => handleMouseOver(index)}
-        onMouseOut={() => handleMouseOut(index)}
-      >
-            {project.dev}
-          </p>
-        </div>
-      </div>
-      <div className="card_main_button">
-        <Link to={`/readmore/${project.id}`} className="button btn">
-          Read More
-        </Link>
-        <a href="#" className="button2 btn">  
-          Source Code
-        </a>
-      </div>
-      <div
-      className={`contBox ${isVisible[index]? "visible" : "hidden"}`}
-      onMouseOver={() => handleMouseOver(index)}
-      onMouseOut={() => handleMouseOut(index)}
-    >
-        <div className="heading">
-          <img width={40} src={project.pro} alt="" />
-          <div className="details1">
-            <p id="name">@{project.dev}</p>
-            <p id="occupation">{project.role}</p>
+    <div className="card" ref={containerRef} style={{ overflowY: 'auto', maxHeight: '100vh' }}>
+      {features.map((project, index) => (
+        <div className="card_main" key={index}>
+          <img src={project.img} alt="" className="card_main_img" title={project.title} />
+          <div className="card_main_name">
+            <h2>{project.title}</h2>
+            <div className="card_main_icon">
+              <i>
+                <BsFillHeartFill /> <span>{project.hearts}</span>
+              </i>
+            </div>
+          </div>
+          <div className="stat">
+            <div>
+              <p>
+                Developer<span>X</span>
+              </p>
+            </div>
+            <div>
+              <p>
+                Uploaded On<span>dd:mm:yy</span>
+              </p>
+            </div>
+          </div>
+          <div className="author">
+            <div className="nameAuthor">
+              <p>By : &nbsp; </p>
+              <p
+                id="author_name"
+                onMouseOver={() => handleMouseOver(index)}
+                onMouseOut={() => handleMouseOut(index)}
+              >
+                {project.dev}
+              </p>
+            </div>
+          </div>
+          <div className="card_main_button">
+            <Link to={`/readmore/${project.id}`} className="button btn">
+              Read More
+            </Link>
+            <a href="#" className="button2 btn">  
+              Source Code
+            </a>
+          </div>
+          <div
+            className={`contBox ${isVisible[index] ? "visible" : "hidden"}`}
+            onMouseOver={() => handleMouseOver(index)}
+            onMouseOut={() => handleMouseOut(index)}
+          >
+            <div className="heading">
+              <img width={40} src={project.pro} alt="" />
+              <div className="details1">
+                <p id="name">@{project.dev}</p>
+                <p id="occupation">{project.role}</p>
+              </div>
+            </div>
+            <div className="details2">
+              <p id="info">
+                {project.about}
+              </p>
+            </div>
+            <div className="btnnn">
+              <button>Follow Me</button>
+              <button>
+                <Link to={`/profile/${project.id}`}>
+                  View Profile
+                </Link>
+              </button>
+            </div>
           </div>
         </div>
-        <div className="details2">
-          <p id="info">
-            {project.about}
-          </p>
-        </div>
-        <div className="btnnn">
-          <button>Follow Me</button>
-          <button><Link to={`/profile/${project.id}`}>
-          View Profile
-        </Link></button>
-        </div>
+      ))}
+
+      <div style={{ textAlign: 'center', padding: '20px' }}>
+        <button onClick={scrollToTop} className="button btn">
+          To the Top
+        </button>
       </div>
-      </div>
-  )}
-  </div>
+    </div>
   );
 }
 
-export default CardMain;
-
+export default CardMain;