From b682793f5966f0212daf6aa34e43934a44494094 Mon Sep 17 00:00:00 2001 From: Toufiq005 Date: Fri, 16 May 2025 16:51:17 +0600 Subject: [PATCH] bug fix: z-index issue --- components/website/hero-sec.tsx | 14 ++++++-------- .../components/cursor/common/bubble-cursor.tsx | 4 +++- .../components/cursor/common/character-cursor.tsx | 3 +++ .../components/cursor/common/rainbow-cursor.tsx | 3 +++ .../components/cursor/common/snowflake-cursor.tsx | 4 +++- .../components/cursor/common/springy-cursor.tsx | 3 +++ 6 files changed, 21 insertions(+), 10 deletions(-) diff --git a/components/website/hero-sec.tsx b/components/website/hero-sec.tsx index fdaa6cc..bad5679 100644 --- a/components/website/hero-sec.tsx +++ b/components/website/hero-sec.tsx @@ -1,7 +1,7 @@ /* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-html-link-for-pages */ 'use client'; -import { ArrowRight, ChevronsRight, Component, MoveRight } from 'lucide-react'; +import { ArrowRight, ChevronsRight, Component, Divide, MoveRight } from 'lucide-react'; import { Button } from '@/components/website/ui/button'; import React, { useEffect, useMemo, useState } from 'react'; import Link from 'next/link'; @@ -90,29 +90,27 @@ function HeroSec() { { title: 'Bubble Cursor', link: '/components/bubble-cursor', - component: , + component: , }, { title: 'Character Cursor', link: '/components/character-cursor', - component: , + component: , }, { title: 'Snowflake Cursor', link: '/components/character-cursor', - component: , + component: , }, { title: 'Rainbow Cursor', link: '/components/rainbow-cursor', - - component: , + component: , }, { title: 'Follow Cursor', link: '/components/follow-cursor', - component: , }, { @@ -123,7 +121,7 @@ function HeroSec() { { title: 'Springy Cursor', link: '/components/springy-cursor', - component: , + component: , }, ]; return ( diff --git a/registry/components/cursor/common/bubble-cursor.tsx b/registry/components/cursor/common/bubble-cursor.tsx index 787b845..4ebdf55 100644 --- a/registry/components/cursor/common/bubble-cursor.tsx +++ b/registry/components/cursor/common/bubble-cursor.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useRef } from 'react'; interface BubbleCursorProps { wrapperElement?: HTMLElement; + zIndex?: number; } class Particle { @@ -49,7 +50,7 @@ class Particle { context.closePath(); } } -const BubbleCursor: React.FC = ({ wrapperElement }) => { +const BubbleCursor: React.FC = ({ wrapperElement, zIndex }) => { const canvasRef = useRef(null); const particlesRef = useRef([]); const cursorRef = useRef({ x: 0, y: 0 }); @@ -81,6 +82,7 @@ const BubbleCursor: React.FC = ({ wrapperElement }) => { canvas.style.top = '0px'; canvas.style.left = '0px'; canvas.style.pointerEvents = 'none'; + canvas.style.zIndex = zIndex ? zIndex.toString() : ''; if (wrapperElement) { canvas.style.position = 'absolute'; diff --git a/registry/components/cursor/common/character-cursor.tsx b/registry/components/cursor/common/character-cursor.tsx index 8d7baf2..c5477f1 100644 --- a/registry/components/cursor/common/character-cursor.tsx +++ b/registry/components/cursor/common/character-cursor.tsx @@ -17,6 +17,7 @@ interface CharacterCursorProps { characters?: string[]; colors?: string[]; cursorOffset?: { x: number; y: number }; + zIndex?: number; font?: string; characterLifeSpanFunction?: () => number; initialCharacterVelocityFunction?: () => { x: number; y: number }; @@ -50,6 +51,7 @@ const CharacterCursor: React.FC = ({ Math.max(((lifeSpan - age) / lifeSpan) * 2, 0), characterNewRotationDegreesFunction = (age, lifeSpan) => (lifeSpan - age) / 5, wrapperElement, + zIndex, }) => { const canvasRef = useRef(null); const particlesRef = useRef([]); @@ -146,6 +148,7 @@ const CharacterCursor: React.FC = ({ canvas.style.top = '0px'; canvas.style.left = '0px'; canvas.style.pointerEvents = 'none'; + canvas.style.zIndex = zIndex ? zIndex.toString() : ''; if (wrapperElement) { canvas.style.position = 'absolute'; diff --git a/registry/components/cursor/common/rainbow-cursor.tsx b/registry/components/cursor/common/rainbow-cursor.tsx index 81beb59..f01fad8 100644 --- a/registry/components/cursor/common/rainbow-cursor.tsx +++ b/registry/components/cursor/common/rainbow-cursor.tsx @@ -14,6 +14,7 @@ interface RainbowCursorProps { pulseSpeed?: number; pulseMin?: number; pulseMax?: number; + zIndex?: number; } const RainbowCursor: React.FC = ({ @@ -27,6 +28,7 @@ const RainbowCursor: React.FC = ({ pulseSpeed = 0.01, pulseMin = 0.8, pulseMax = 1.2, + zIndex }) => { const canvasRef = useRef(null); const contextRef = useRef(null); @@ -99,6 +101,7 @@ const RainbowCursor: React.FC = ({ canvas.style.left = '0px'; canvas.style.pointerEvents = 'none'; canvas.style.position = hasWrapperEl ? 'absolute' : 'fixed'; + canvas.style.zIndex = zIndex ? zIndex.toString() : ''; if (hasWrapperEl) { element?.appendChild(canvas); diff --git a/registry/components/cursor/common/snowflake-cursor.tsx b/registry/components/cursor/common/snowflake-cursor.tsx index b37490c..412e9f1 100644 --- a/registry/components/cursor/common/snowflake-cursor.tsx +++ b/registry/components/cursor/common/snowflake-cursor.tsx @@ -4,9 +4,10 @@ import React, { useEffect, useRef } from 'react'; interface SnowflakeCursorOptions { element?: HTMLElement; + zIndex?: number; } -const SnowflakeCursor: React.FC = ({ element }) => { +const SnowflakeCursor: React.FC = ({ element, zIndex }) => { const canvasRef = useRef(null); const particles = useRef([]); const canvImages = useRef([]); @@ -32,6 +33,7 @@ const SnowflakeCursor: React.FC = ({ element }) => { canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.pointerEvents = 'none'; + canvas.style.zIndex = zIndex ? zIndex.toString() : ''; targetElement.appendChild(canvas); canvasRef.current = canvas; diff --git a/registry/components/cursor/common/springy-cursor.tsx b/registry/components/cursor/common/springy-cursor.tsx index 2647475..c9a3a7a 100644 --- a/registry/components/cursor/common/springy-cursor.tsx +++ b/registry/components/cursor/common/springy-cursor.tsx @@ -5,11 +5,13 @@ import React, { useEffect, useRef } from 'react'; interface SpringyCursorProps { emoji?: string; wrapperElement?: HTMLElement; + zIndex?: number; } const SpringyCursor: React.FC = ({ emoji = '⚽', wrapperElement, + zIndex, }) => { const canvasRef = useRef(null); const particlesRef = useRef([]); @@ -52,6 +54,7 @@ const SpringyCursor: React.FC = ({ canvas.style.top = '0px'; canvas.style.left = '0px'; canvas.style.pointerEvents = 'none'; + canvas.style.zIndex = zIndex ? zIndex.toString() : ''; if (wrapperElement) { canvas.style.position = 'absolute';