Skip to content

feat: add custom carousel #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add custom carousel #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 4 additions & 51 deletions src/app/(site)/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import EventCard from "@/components/events/event-card";
import { CustomCarousel } from "@/components/CustomCarousel";
import SlideShow from "@/components/events/slide-show";
import { BackgroundGradient } from "@/components/ui/background-gradient";
import Image from "next/image";
Expand Down Expand Up @@ -32,12 +32,10 @@ const Events = async ({}: Props) => {
builds a strong tech community.
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{eventList.map((event, idx: number) => (
<EventCard key={idx} event={event} />
))}
<CustomCarousel events={eventList} />
</div>
<div className="w-full flex mt-10 mb-5 text-white justify-center font-bold text-3xl md:text-5xl items-center">
<span>Our Gallary</span>
<span>Our Gallery</span>
<span className="bg-gradient-to-r from-[#31B553] to-[#0AA294] bg-clip-text text-transparent ml-2">
.
</span>
Expand All @@ -47,49 +45,4 @@ const Events = async ({}: Props) => {
);
};

// const eventList = [
// {
// title: "Make things float in air",
// slug: "make-things-float-in-air",
// description: "Hover over this card to unleash the power of CSS perspective",
// image: "/events/event.png",
// },
// {
// title: "Make things float in air",
// slug: "make-things-float-in-air",
// description: "Hover over this card to unleash the power of CSS perspective",
// image: "/events/event.png",
// },
// {
// title: "Make things float in air",
// slug: "make-things-float-in-air",
// description: "Hover over this card to unleash the power of CSS perspective",
// image: "/events/event.png",
// },
// {
// title: "Make things float in air",
// slug: "make-things-float-in-air",
// description: "Hover over this card to unleash the power of CSS perspective",
// image: "/events/event.png",
// },
// {
// title: "Make things float in air",
// slug: "make-things-float-in-air",
// description: "Hover over this card to unleash the power of CSS perspective",
// image: "/events/event.png",
// },
// {
// title: "Make things float in air",
// slug: "make-things-float-in-air",
// description: "Hover over this card to unleash the power of CSS perspective",
// image: "/events/event.png",
// },
// {
// title: "Make things float in air",
// slug: "make-things-float-in-air",
// description: "Hover over this card to unleash the power of CSS perspective",
// image: "/events/event.png",
// },
// ];

export default Events;
export default Events;
4 changes: 2 additions & 2 deletions src/app/(site)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import AboutUs from "@/components/home/about-us";
import Domains from "@/components/home/domains";
import Landing from "@/components/home/landing";
import OurEvents from "@/components/home/our-events";
import CustomCarousel from "@/components/CustomCarousel";
import { getAllEvents } from "@/sanity/data/home-data";

export default async function Home() {
Expand All @@ -11,7 +11,7 @@ export default async function Home() {
<Landing />
<AboutUs />
<Domains />
<OurEvents events={events}/>
<CustomCarousel event={events}/>
</div>
);
}
100 changes: 100 additions & 0 deletions src/components/CustomCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
"use client";

import React, { useEffect, useState, useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import { Event } from "@/sanity/schemas/event-schema";
import { CardContainer, CardBody, CardItem } from "./ui/3d-card";

type Props = {
event: Event[];
};

const CustomCarousel: React.FC<Props> = ({ event }) => {
const [activeIndex, setActiveIndex] = useState(0);
const [isHovered, setIsHovered] = useState<number | null>(null);
const intervalRef = useRef<NodeJS.Timeout | null>(null);

const startCarousel = () => {
intervalRef.current = setInterval(() => {
setActiveIndex((prevIndex) =>
prevIndex === event.length - 1 ? 0 : prevIndex + 1
);
}, 1000);
};

const stopCarousel = () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};

const handleMouseEnter = (index: number) => {
setIsHovered(index);
stopCarousel();
};

const handleMouseLeave = () => {
setIsHovered(null);
startCarousel();
};

useEffect(() => {
startCarousel();
return () => stopCarousel();
}, []);

return (
<>
<div className="h-full w-fill flex flex-col items-center justify-center gap-4">
<div className="text-5xl font-bold text-center text-white flex flex-col items-center justify-center">
<h1 className="bg-gradient-to-r from-[#31B553] to-[#0AA294] bg-clip-text text-transparent">
Our Events
</h1>
<Image
src="hero-sep.svg"
height={10}
width={300}
alt="Hero Separator"
className="mt-5 pl-14 items-center justify-center justify-items-center place-items-center"
/>
</div>
</div>
<div className="flex flex-wrap justify-center">
{event.map((evt, index) => (
<CardContainer
// key={evt._id}
className={`${
index === isHovered || (isHovered === null && index === activeIndex)
? "scale-110 z-10"
: "scale-100 opacity-70 z-0"
} transition-transform duration-300 ease-in-out`}
containerClassName="m-2"
onMouseEnter={() => handleMouseEnter(index)}
onMouseLeave={handleMouseLeave}
>
<Link href={`/events/${evt.slug}`}>
<CardBody className="relative">
<Image
src={evt.poster}
alt={evt.title}
width={320}
height={320}
className="object-cover w-full h-full"
/>
<CardItem
className="absolute bottom-2 left-2 text-white text-lg font-semibold"
translateZ={50}
>
{evt.title}
</CardItem>
</CardBody>
</Link>
</CardContainer>
))}
</div>
</>
);
};

export default CustomCarousel;
31 changes: 17 additions & 14 deletions src/components/events/event-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Image from "next/image";
import React from "react";
import { CardBody, CardContainer, CardItem } from "../ui/3d-card";
import Link from "next/link";
import { Meteors } from "../ui/meteors";
import { Event } from "@/sanity/schemas/event-schema";

type Props = {
Expand All @@ -13,21 +12,26 @@ type Props = {

export default function EventCard({ event }: Props) {
return (
<CardContainer className="inter-var w-[100%]">
<div className="absolute h-full w-full bg-gradient-to-r from-[#31B553] to-[#0AA294] transform scale-[0.80] rounded-full blur-3xl" />
<CardBody className="relative inset-0 bg-[#242424] z-40 w-auto sm:w-[30rem] h-auto rounded-xl p-6 ">
<CardContainer className="inter-var w-[100%] group">
{/* Highlighted Change: Updated the background scale effect */}
<div className="absolute h-full w-full bg-gradient-to-r from-[#31B553] to-[#0AA294] transform scale-[0.80] rounded-full blur-3xl transition-transform duration-300 ease-in-out group-hover:scale-[1.2]" />

<CardBody className="relative inset-0 bg-[#242424] z-40 w-auto sm:w-[30rem] h-auto rounded-xl p-6 transition-transform duration-300 ease-in-out group-hover:scale-[1.2]">
<CardItem translateZ="100" className="w-full mt-4">
<Image
src={event.poster}
height="1000"
width="1000"
className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
alt={`${event.title} image`}
/>
<div className="relative overflow-hidden rounded-xl">
{/* Highlighted Change: Updated the image scale effect */}
<Image
src={event.poster}
height="1000"
width="1000"
className="h-60 w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-[1.2] rounded-xl group-hover:shadow-xl"
alt={`${event.title} image`}
/>
</div>
</CardItem>
<div className="flex justify-end items-end mt-6">
<CardItem translateZ={60} className="rounded-xl text-xs font-bold">
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block">
<CardItem translateZ={60} className="rounded-xl text-xs font-bold">
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block">
<span className="absolute inset-0 overflow-hidden rounded-full">
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
</span>
Expand All @@ -53,7 +57,6 @@ export default function EventCard({ event }: Props) {
</button>
</CardItem>
</div>
{/* <Meteors number={40} /> */}
</CardBody>
</CardContainer>
);
Expand Down
16 changes: 12 additions & 4 deletions src/components/ui/3d-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import React, {
useEffect,
} from "react";

// Context to manage whether the mouse is hovering over a card
const MouseEnterContext = createContext<
[boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
>(undefined);
Expand All @@ -17,10 +18,14 @@ export const CardContainer = ({
children,
className,
containerClassName,
onMouseEnter, // Highlight: Added prop to handle mouse enter
onMouseLeave, // Highlight: Added prop to handle mouse leave
}: {
children?: React.ReactNode;
className?: string;
containerClassName?: string;
onMouseEnter?: () => void; // Highlight: Added prop to handle mouse enter
onMouseLeave?: () => void; // Highlight: Added prop to handle mouse leave
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const [isMouseEntered, setIsMouseEntered] = useState(false);
Expand All @@ -36,14 +41,17 @@ export const CardContainer = ({

const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
setIsMouseEntered(true);
if (onMouseEnter) onMouseEnter(); // Highlight: Trigger the passed onMouseEnter callback
if (!containerRef.current) return;
};

const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
if (onMouseLeave) onMouseLeave(); // Highlight: Trigger the passed onMouseLeave callback
if (!containerRef.current) return;
setIsMouseEntered(false);
containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
};

return (
<MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
<div
Expand Down Expand Up @@ -84,10 +92,10 @@ export const CardBody = ({
}) => {
return (
<div
className={cn(
"h-80 w-80 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d] shadow-2xl border-2 text-justify border-gray-800",
className
)}
className={cn(
"h-80 w-80 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d] shadow-2xl border-2 text-justify border-gray-800",
className
)}
>
{children}
</div>
Expand Down