Add glow hover effect to the main page #1030
Conversation
…hem to the main page instead of common ones
IPogorelova
requested review from
andrashee,
mkue,
ssandino and
socialincome-dev
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThis pull request introduces a new Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ui/src/components/card/glow-hover-card.tsx (1)
8-14: Make light color configurable via props.The light color is hardcoded to '#CEFF00', which limits component reusability. Consider accepting it as a prop with a default value.
-export const GlowHoverCard = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }) => { +type GlowHoverCardProps = React.HTMLAttributes<HTMLDivElement> & { + lightColor?: string; +}; + +export const GlowHoverCard = React.forwardRef<HTMLDivElement, GlowHoverCardProps>( + ({ className, lightColor = '#CEFF00', ...props }) => { - const refCard = useGlowHover({ lightColor: '#CEFF00' }); + const refCard = useGlowHover({ lightColor });website/src/app/[lang]/[region]/(website)/(home)/(sections)/approach.tsx (1)
27-27: Resolve conflicting border styles.The
border-noneclass conflicts withborder-2from GlowHoverCard's base styles. Consider handling borders consistently.-<GlowHoverCard key={card.title} className="theme-blue mx-auto min-w-80 max-w-md flex-1 rounded-none border-none"> +<GlowHoverCard key={card.title} className="theme-blue mx-auto min-w-80 max-w-md flex-1 rounded-none">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
ui/src/components/card/card.tsx(1 hunks)ui/src/components/card/glow-hover-card.tsx(1 hunks)ui/src/components/card/index.ts(1 hunks)website/src/app/[lang]/[region]/(website)/(home)/(components)/hero-video-overlay.tsx(3 hunks)website/src/app/[lang]/[region]/(website)/(home)/(sections)/approach.tsx(3 hunks)
✅ Files skipped from review due to trivial changes (2)
- ui/src/components/card/index.ts
- ui/src/components/card/card.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test website
- GitHub Check: Prettify
- GitHub Check: Security checks (typescript)
🔇 Additional comments (1)
website/src/app/[lang]/[region]/(website)/(home)/(components)/hero-video-overlay.tsx (1)
21-21: Ensure color consistency and verify text contrast.Two suggestions:
- Use the same light color from a shared constant
- Verify that black text maintains sufficient contrast against the glowing background
Also applies to: 56-58
…n-page' into add-glow-hover-effect-to-the-main-page # Conflicts: # ui/src/components/card/glow-hover-card.tsx
…n-page' into add-glow-hover-effect-to-the-main-page
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
ui/src/components/use-glow-hover/glow-hover-effect.ts (2)
50-50: Type enhancement looks good but consider performance optimizationsThe generic type parameter addition is well-aligned with the hook changes. However, consider these performance improvements:
- Debounce mouse move events
- Use CSS transforms instead of direct style manipulation
- Cache computed values
Example debounce implementation:
const debouncedOnMouseMove = debounce((e: MouseEvent) => { lastMousePos = { x: e.clientX, y: e.clientY }; if (isElementMovable) { updateEffectWithPosition(); } else { updateGlowEffect(); } }, 16); // ~60fps
Line range hint
50-214: Consider adding error boundariesThe complex animation logic could benefit from error handling to prevent potential runtime crashes.
try { updateGlowEffect(); } catch (error) { console.error('Failed to update glow effect:', error); // Fallback to default state el.style.background = customStaticBg ? customStaticBg : ''; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
ui/src/components/use-glow-hover/glow-hover-effect.ts(1 hunks)ui/src/components/use-glow-hover/use-glow-hover.ts(1 hunks)website/src/app/[lang]/[region]/(website)/(home)/(components)/hero-video-overlay.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- website/src/app/[lang]/[region]/(website)/(home)/(components)/hero-video-overlay.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test website
- GitHub Check: Prettify
- GitHub Check: Security checks (typescript)
🔇 Additional comments (2)
ui/src/components/use-glow-hover/use-glow-hover.ts (2)
3-3: Type safety improvements look good!The generic type parameter and RefObject typing enhance type safety while maintaining flexibility.
Also applies to: 8-9
12-12: Verify type casting necessityThe type casting of options might be unnecessary since GlowHoverOptions is already defined in the parameter type.
This PR introduces a new component,
GlowHoverCard, which copiesCardwith a glowing cursor effect.Issue: #987
Summary by CodeRabbit
Release Notes
New Features
GlowHoverCardcomponent with interactive hover effects.Improvements
useGlowHoverhook.UI Updates