Merge pull request #710 from Utsavladia/popular-card

Fixed popular section cards
SUGAM-ARORA · Aug 9, 2024 · 34720fe · 34720fe
2 parents 4629dba + 00393f1
commit 34720fe
Show file tree

Hide file tree

Showing 3 changed files with 224 additions and 378 deletions.
diff --git a/src/Components/CardMain.js b/src/Components/CardMain.js
@@ -1,6 +1,3 @@
-import React, { useState, useEffect, useRef } from "react";
-import { BsFillHeartFill } from "react-icons/bs";
-import { Link } from "react-router-dom";
 import Card1 from "../img/card1.jpg";
 import Card2 from "../img/card2.jpg";
 import Card3 from "../img/card3.jpg";
@@ -15,6 +12,7 @@ import Card11 from "./projects/card11.png";
 import Card12 from "./projects/card12.png";
 import icon from './projects/profile.png';
 import icon1 from './projects/profile1.png'
+import Cardcontainer from "./Cardcontainer";
 
 
 const features = [
@@ -164,150 +162,11 @@ const features = [
     },
 ];
 
-function CardMain({sortProjects}) {
-  const [isVisible, setIsVisible] = useState(
-    new Array(features.length).fill(false)
-  );
-  const containerRef = useRef(null);
-  let hideTimeout;
+function CardMain() {
+  return(
+    <Cardcontainer features={features}/>
+  )
 
-    useEffect(() => {
-        return () => {
-            clearTimeout(hideTimeout);
-        };
-    }, []);
-
-    const handleMouseOver = (index) => {
-        clearTimeout(hideTimeout);
-        setIsVisible((prevIsVisible) => {
-            const newIsVisible = [...prevIsVisible];
-            newIsVisible[index] = true;
-            return newIsVisible;
-        });
-    };
-
-    const handleMouseOut = (index) => {
-        hideTimeout = setTimeout(() => {
-            setIsVisible((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",
-        });
-    };
-
-  const sortedProjects = sortProjects([...features]);
-
-  return (
-    <div
-      className="card"
-      ref={containerRef}
-      style={{ overflowY: "auto", maxHeight: "100vh" }}
-    >
-      {sortedProjects.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" style={{ marginTop: '-18px' }}>
-              <i>
-                <BsFillHeartFill /> <span>{project.hearts}</span>
-              </i>
-            </div>
-          </div>
-          <div className="stat">
-            <div>
-              <p>
-                Developer<span>X</span>
-              </p>
-            </div>
-            <div>
-              <p>
-                Type of Project<span>{project.type}</span>
-              </p>
-            </div>
-          </div>
-          <div className="author" style={{ marginTop: '-12px' }}>
-            <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" style={{ marginTop: '-16px' }}>
-  <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
-                style={{
-                    textAlign: "center",
-                    padding: "20px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "100%",
-                }}
-            >
-                <button onClick={scrollToTop} className="button btn">
-                    To the Top
-                </button>
-            </div>
-        </div>
-    );
 }
 
 export default CardMain;
diff --git a/src/Components/Cardcontainer.js b/src/Components/Cardcontainer.js
@@ -0,0 +1,149 @@
+import React, { useState, useEffect, useRef } from "react";
+import { BsFillHeartFill } from "react-icons/bs";
+import { Link } from "react-router-dom";
+
+const Cardcontainer = ({features}) => {
+  const [isVisible, setIsVisible] = useState(
+    new Array(features.length).fill(false)
+  );
+  const containerRef = useRef(null);
+  let hideTimeout;
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(hideTimeout);
+    };
+  }, []);
+
+  const handleMouseOver = (index) => {
+    clearTimeout(hideTimeout);
+    setIsVisible((prevIsVisible) => {
+      const newIsVisible = [...prevIsVisible];
+      newIsVisible[index] = true;
+      return newIsVisible;
+    });
+  };
+
+  const handleMouseOut = (index) => {
+    hideTimeout = setTimeout(() => {
+      setIsVisible((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"
+      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>
+                Type of Project<span>{project.type}</span>
+              </p>
+            </div>
+          </div>
+          <div className="author" style={{ marginTop: "-12px" }}>
+            <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" style={{ marginTop: "-16px" }}>
+            <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
+        style={{
+          textAlign: "center",
+          padding: "20px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+        }}
+      >
+        <button onClick={scrollToTop} className="button btn">
+          To the Top
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Cardcontainer;