Merge pull request #41 from TusharSin810/main

Added 3d Cards for Events Page

src/components/Events/Event.jsx

@@ -2,33 +2,20 @@ import React from "react";
 import Header from "../Header/Header";
 import "./Event.css";
 import Footer from "../Footer/Footer";
-import MyCard from "./EventCard";
-import eventData from "../../data/events.json";
+import {CardCom} from '../uiComponents/CardCom'
+import cardD from '../../data/events.json'
 
 function Event() {
   return (
     <div>
       <Header className='header' />
 
       <h2 className="ongoing">Ongoing Events</h2>
-      <div className="event">
-        {eventData &&
-          eventData.map((event) => {
-            return (
-              <MyCard id={event.id} title={event.name} body={event.details} />
-            );
-          })}
+      <div className='flex flex-row flex-wrap justify-evenly px-16'>
+        {cardD.map((data,index) => (
+        <CardCom key={data.id || index} title={data.title} description={data.description} link={data.link} image={data.image} live={data.live} code={data.code} />
+      ))}
       </div>
-      <h2 className="ongoing">Upcoming Events</h2>
-      <div className="event">
-        {eventData &&
-          eventData.map((event) => {
-            return (
-              <MyCard id={event.id} title={event.name} body={event.details} />
-            );
-          })}
-      </div>
-
       <Footer />
     </div>
   );

src/components/ui/3d-card.jsx

@@ -0,0 +1,126 @@
+"use client";;
+import { cn } from "../../lib/utils";
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useRef,
+  useEffect,
+} from "react";
+
+const MouseEnterContext = createContext(undefined);
+
+export const CardContainer = ({
+  children,
+  className,
+  containerClassName
+}) => {
+  const containerRef = useRef(null);
+  const [isMouseEntered, setIsMouseEntered] = useState(false);
+
+  const handleMouseMove = (e) => {
+    if (!containerRef.current) return;
+    const { left, top, width, height } =
+      containerRef.current.getBoundingClientRect();
+    const x = (e.clientX - left - width / 2) / 25;
+    const y = (e.clientY - top - height / 2) / 25;
+    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
+  };
+
+  const handleMouseEnter = (e) => {
+    setIsMouseEntered(true);
+    if (!containerRef.current) return;
+  };
+
+  const handleMouseLeave = (e) => {
+    if (!containerRef.current) return;
+    setIsMouseEntered(false);
+    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
+  };
+  return (
+    (<MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
+      <div
+        className={cn("py-2 flex items-center justify-center", containerClassName)}
+        style={{
+          perspective: "900px",
+        }}>
+        <div
+          ref={containerRef}
+          onMouseEnter={handleMouseEnter}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            "flex items-center justify-center relative transition-all duration-200 ease-linear",
+            className
+          )}
+          style={{
+            transformStyle: "preserve-3d",
+          }}>
+          {children}
+        </div>
+      </div>
+    </MouseEnterContext.Provider>)
+  );
+};
+
+export const CardBody = ({
+  children,
+  className
+}) => {
+  return (
+    (<div
+      className={cn(
+        "h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d]",
+        className
+      )}>
+      {children}
+    </div>)
+  );
+};
+
+export const CardItem = ({
+  as: Tag = "div",
+  children,
+  className,
+  translateX = 0,
+  translateY = 0,
+  translateZ = 0,
+  rotateX = 0,
+  rotateY = 0,
+  rotateZ = 0,
+  ...rest
+}) => {
+  const ref = useRef(null);
+  const [isMouseEntered] = useMouseEnter();
+
+  useEffect(() => {
+    handleAnimations();
+  }, [isMouseEntered]);
+
+  const handleAnimations = () => {
+    if (!ref.current) return;
+    if (isMouseEntered) {
+      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+    } else {
+      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`;
+    }
+  };
+
+  return (
+    (<Tag
+      ref={ref}
+      className={cn("w-fit transition duration-200 ease-linear", className)}
+      {...rest}>
+      {children}
+    </Tag>)
+  );
+};
+
+// Create a hook to use the context
+export const useMouseEnter = () => {
+  const context = useContext(MouseEnterContext);
+  if (context === undefined) {
+    throw new Error("useMouseEnter must be used within a MouseEnterProvider");
+  }
+  return context;
+};

src/components/uiComponents/CardCom.jsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { CardBody, CardContainer, CardItem } from "../ui/3d-card"
+
+
+export function CardCom({title,description,live,code,image}) {
+  return (
+    <CardContainer className="inter-var">
+      <CardBody
+        className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[20rem] h-[22rem] rounded-xl p-6 border"
+      >
+        <CardItem
+          translateZ="50"
+          className="text-xl font-bold text-neutral-600 dark:text-white"
+        >
+          {title}
+        </CardItem>
+        <CardItem
+          as="p"
+          translateZ="60"
+          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+        >
+          {description}
+        </CardItem>
+        <CardItem translateZ="100" className="w-full mt-4">
+          <img
+            src={image}
+            height="1000"
+            width="1000"
+            className="h-30 w-full object-cover rounded-xl group-hover/card:shadow-xl"
+            alt="thumbnail"
+          />
+        </CardItem>
+      </CardBody>
+    </CardContainer>
+  );
+}

src/data/events.json

@@ -1,17 +1,17 @@
 [
-  {
-    "id": 1,
-    "name": "Wiki Race",
-    "details": "Converge'24"
-  },
-  {
-    "id": 2,
-    "name": "Prakhar Shankar",
-    "details": "Core Member"
-  },
-  {
-    "id": 3,
-    "name": "Pradyot Ranjan",
-    "details": "Core Member"
-  }
-]
+    {
+        "title": "Events Title",
+        "description": "Event Description",
+        "image": "https://placehold.co/600x500"
+},
+    {
+        "title": "Events Title",
+        "description": "Event Description",
+        "image":"https://placehold.co/600x500"
+},
+    {
+        "title": "Events Title",
+        "description": "Event Description",
+        "image":"https://placehold.co/600x500"
+}
+]