From 0b8d87ee466e8cc6e2027db062f8d186cfca2862 Mon Sep 17 00:00:00 2001 From: TusharSin810 Date: Sat, 5 Oct 2024 22:15:44 +0530 Subject: [PATCH] Added 3d Cards for Events Page --- src/components/Events/Event.jsx | 25 ++--- src/components/Events/EventCard.css | 19 ---- src/components/Events/EventCard.jsx | 27 ----- src/components/ui/3d-card.jsx | 126 ++++++++++++++++++++++++ src/components/uiComponents/CardCom.jsx | 38 +++++++ src/data/events.json | 32 +++--- 6 files changed, 186 insertions(+), 81 deletions(-) delete mode 100644 src/components/Events/EventCard.css delete mode 100644 src/components/Events/EventCard.jsx create mode 100644 src/components/ui/3d-card.jsx create mode 100644 src/components/uiComponents/CardCom.jsx diff --git a/src/components/Events/Event.jsx b/src/components/Events/Event.jsx index 3ea4034..8086304 100644 --- a/src/components/Events/Event.jsx +++ b/src/components/Events/Event.jsx @@ -2,8 +2,8 @@ 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 ( @@ -11,24 +11,11 @@ function Event() {

Ongoing Events

-
- {eventData && - eventData.map((event) => { - return ( - - ); - })} +
+ {cardD.map((data,index) => ( + + ))}
-

Upcoming Events

-
- {eventData && - eventData.map((event) => { - return ( - - ); - })} -
-
); diff --git a/src/components/Events/EventCard.css b/src/components/Events/EventCard.css deleted file mode 100644 index 82a68f5..0000000 --- a/src/components/Events/EventCard.css +++ /dev/null @@ -1,19 +0,0 @@ -.pad { - margin: 20px; - transition: transform 0.3s ease, box-shadow 0.3s ease; - width: 22rem; - height: 300px; -} - -.pad:hover { - transform: scale(1.1); - box-shadow: 0 0 25px rgba(138, 63, 252, 0.6); -} - -.body { - background-color: #1a1e27; -} - -.back { - background-color: transparent; -} diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx deleted file mode 100644 index 4526c74..0000000 --- a/src/components/Events/EventCard.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import Card from "react-bootstrap/Card"; -import "./EventCard.css"; -import "bootstrap/dist/css/bootstrap.min.css"; - -function MyCard(event) { - return ( - - - - {event.title} - {event.body} - - - ); -} - -export default MyCard; diff --git a/src/components/ui/3d-card.jsx b/src/components/ui/3d-card.jsx new file mode 100644 index 0000000..e964251 --- /dev/null +++ b/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 ( + ( +
+
+ {children} +
+
+ ) + ); +}; + +export const CardBody = ({ + children, + className +}) => { + return ( + (
*]:[transform-style:preserve-3d]", + className + )}> + {children} +
) + ); +}; + +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 ( + ( + {children} + ) + ); +}; + +// 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; +}; diff --git a/src/components/uiComponents/CardCom.jsx b/src/components/uiComponents/CardCom.jsx new file mode 100644 index 0000000..7a51a2a --- /dev/null +++ b/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 ( + + + + {title} + + + {description} + + + thumbnail + + + + ); +} \ No newline at end of file diff --git a/src/data/events.json b/src/data/events.json index e4118ef..ba6cb25 100644 --- a/src/data/events.json +++ b/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" +} +] \ No newline at end of file