feat: useCursor

SySagar · Aug 26, 2024 · e98c188 · e98c188
1 parent a78e1fb
commit e98c188
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 1 deletion.
diff --git a/src/app/home/HeroPage.tsx b/src/app/home/HeroPage.tsx
@@ -2,14 +2,16 @@ import { Skeleton, Divider, Stack, Typography } from "@mui/material";
 import HeroBlog from "./components/HeroBlog";
 import Blog from "./components/Blog";
 import Sidebar from "./components/Sidebar";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import APIMethods from "../../lib/axios/api";
 import { blogTypes } from "../blog/types/blogTypes";
 import SentimentDissatisfiedIcon from "@mui/icons-material/SentimentDissatisfied";
 import useSearchStore from "../../lib/store/useSearchStore";
 import "./home.css";
 import { useResponsive } from "../../hooks/useResponsive";
 import AnimatePage from "../../layout/AnimatePage";
+import { useCursor } from "../../hooks/useCursor";
+import { Chip, Avatar } from "@mui/material";
 
 export default function HeroPage() {
   const [loading, setLoading] = useState(true);
@@ -28,6 +30,33 @@ export default function HeroPage() {
     });
   };
 
+  const { cursorData, handleMouseMove, handleMouseLeave, isFadingOut } =
+    useCursor();
+
+  const getRandomName = useMemo(
+    (nameList = ["Diksha", "Aman", "Ayushii", "Sagar", "Kartik"]) => {
+      const randomIndex = Math.floor(Math.random() * nameList.length);
+      return nameList[randomIndex];
+    },
+    [cursorData.visible],
+  );
+
+  const getRandomUrl = useMemo(
+    (
+      nameList = [
+        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        "https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?q=80&w=1966&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        "https://images.unsplash.com/photo-1526510747491-58f928ec870f?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      ],
+    ) => {
+      const randomIndex = Math.floor(Math.random() * nameList.length);
+      return nameList[randomIndex];
+    },
+    [cursorData.visible],
+  );
+
   useEffect(() => {
     fetchBLogs()
       .then(() => {
@@ -59,9 +88,38 @@ export default function HeroPage() {
           marginTop={3}
           justifyContent={"center"}
           alignItems={"center"}
+          position={"relative"}
           gap={1}
           borderColor={"#A3A0B2"}
         >
+          {cursorData.visible && (
+            <Chip
+              className={`chip-popup ${isFadingOut ? "fade-out" : "fade-in"}`}
+              label={
+                <Typography fontWeight={600} fontSize={13} color={"#424242"}>
+                  {getRandomName}
+                </Typography>
+              }
+              avatar={
+                <Avatar
+                  sx={{ minWidth: 30, minHeight: 30 }}
+                  alt={getRandomName}
+                  src={getRandomUrl}
+                />
+              }
+              style={{
+                position: "fixed",
+                zIndex: 100,
+                backgroundColor: "#87dcf1",
+                top: cursorData.y,
+                left: cursorData.x,
+                height: "40px",
+                width: "auto",
+                transform: "translate(20%, 20%)",
+                pointerEvents: "none",
+              }}
+            />
+          )}
           <Stack
             justifyContent={"center"}
             alignItems={"center"}
@@ -128,6 +186,10 @@ export default function HeroPage() {
                     key={index}
                     blogId={blog._id}
                     author={blog.authorName}
+                    onMouseMove={(e: any) =>
+                      handleMouseMove(e, blog.title, blog.title)
+                    }
+                    onMouseLeave={handleMouseLeave}
                     date={blog.date}
                     title={blog.title}
                     tags={blog.tags}

diff --git a/src/app/home/components/Blog.tsx b/src/app/home/components/Blog.tsx
@@ -14,6 +14,8 @@ interface BlogTypes {
   blogId: string;
   image: string;
   likes: number;
+  onMouseMove: any;
+  onMouseLeave: any;
 }
 
 export default function Blog({
@@ -23,6 +25,8 @@ export default function Blog({
   tags = ["india", "hello world"],
   blogId,
   image,
+  onMouseMove,
+  onMouseLeave,
 }: BlogTypes) {
   const navigate = useNavigate();
   const isPhone = useMediaQuery("(max-width:800px)");
@@ -39,13 +43,16 @@ export default function Blog({
       alignItems={"center"}
       position={"relative"}
       maxWidth={"300px"}
+      onMouseMove={onMouseMove}
+      onMouseLeave={onMouseLeave}
       maxHeight={isTablet ? "80px" : "300px"}
       onClick={redirectToBlog}
       color={"primary.main"}
       sx={{
         backgroundColor: "#FBFCFA",
         boxShadow: "3px 3px 10px rgba(214, 208, 174,0.7)",
         borderRadius: "5px",
+        cursor: "pointer",
       }}
     >
       <Stack overflow={"hidden"} className="laptop-image">

diff --git a/src/app/home/home.css b/src/app/home/home.css
@@ -64,4 +64,18 @@
   .mobile-image{
     display: none!important;
   }
+}
+
+.chip-popup {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-in {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.fade-out {
+  opacity: 0;
+  transform: scale(0.95);
 }
diff --git a/src/hooks/useCursor.tsx b/src/hooks/useCursor.tsx
@@ -0,0 +1,45 @@
+// cursor.tsx
+import { useState, useEffect } from "react";
+
+export interface CursorData {
+  visible: boolean;
+  x: number;
+  y: number;
+  name: string;
+  value: string;
+}
+
+export const useCursor = () => {
+  const [cursorData, setCursorData] = useState<CursorData>({
+    visible: false,
+    x: 0,
+    y: 0,
+    name: "",
+    value: "",
+  });
+  const [isFadingOut, setIsFadingOut] = useState(false);
+
+  const handleMouseMove = (
+    e: React.MouseEvent,
+    name: string,
+    value: string,
+  ) => {
+    setIsFadingOut(false);
+    setCursorData({
+      visible: true,
+      x: e.clientX,
+      y: e.clientY,
+      name,
+      value,
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setIsFadingOut(true);
+    setTimeout(() => {
+      setCursorData({ visible: false, x: 0, y: 0, name: "", value: "" });
+    }, 300);
+  };
+
+  return { cursorData, handleMouseMove, handleMouseLeave, isFadingOut };
+};