Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix PropertyDetailDrawer close button interactivity and corner transparency leak

Browse Source
This commit is contained in:
Satyam
2026-02-13 05:58:46 +05:30
parent cc58b148e4
commit fae968a541
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SpotlightCard.jsx
+8 -3
View File
@@ -1,6 +1,6 @@
import React, { useRef, useState } from 'react';
export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)" }) => {
export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)", rounded = "rounded-3xl" }) => {
const divRef = useRef(null);
const [position, setPosition] = useState({ x: 0, y: 0 });
const [opacity, setOpacity] = useState(0);
@@ -30,6 +30,11 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
setOpacity(0);
};
// Calculate inner rounding based on outer rounding
// If rounded-3xl (24px), inner should be ~22px
// If rounded-none (0px), inner should be 0px
const innerRounded = rounded === "rounded-none" ? "rounded-none" : "rounded-[22px]";
return (
<div
ref={divRef}
@@ -39,7 +44,7 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
// Light: bg-white, Dark: bg-zinc-800
className={`group relative rounded-3xl bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`}
className={`group relative ${rounded} bg-white dark:bg-zinc-800 overflow-hidden shadow-sm dark:shadow-none ${className}`}
>
{/*
Rainbow Glow Layer
@@ -61,7 +66,7 @@ export const SpotlightCard = ({ children, className = "", spotlightColor = "rgba
- Light Mode: bg-white/90 (Opaque white with slight blur)
- Dark Mode: bg-zinc-950/90
*/}
<div className="absolute inset-[2px] rounded-[22px] bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300" />
<div className={`absolute inset-[2px] ${innerRounded} bg-white/90 dark:bg-zinc-950/90 backdrop-blur-xl z-10 transition-colors duration-300`} />
{/* Surface Shine (Subtle top sheen) */}
<div