feat: spotlight border

wkylin · Dec 6, 2024 · 1f73a41 · 1f73a41
1 parent 34fcf58
commit 1f73a41
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/components/stateless/Spotlight/index.jsx b/src/components/stateless/Spotlight/index.jsx
@@ -1,7 +1,7 @@
-import React, { useRef, useState, useEffect } from 'react'
+import React, { useRef, useState } from 'react'
 import styles from './index.module.less'
 
-const SpotlightCard = ({className, style,children}) => {
+const SpotlightCard = ({className, style, children}) => {
   const divRef = useRef(null)
   const [isFocused, setIsFocused] = useState(false)
   const [position, setPosition] = useState({ x: 0, y: 0 })
@@ -43,7 +43,9 @@ const SpotlightCard = ({className, style,children}) => {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       className={`${styles.cardEffect} ${className}`}
-      style={{...style}}
+      style={{
+        ...style,
+      }}
     >
       <section
         className={styles.spotlight}
@@ -52,6 +54,15 @@ const SpotlightCard = ({className, style,children}) => {
           background: `radial-gradient(1000px circle at ${position.x}px ${position.y}px, rgba(190,255,255,.2), transparent 40%)`,
         }}
       />
+      <section
+        className={styles.spotlight}
+        style={{
+          opacity,
+          border: "2px solid rgb(255, 255, 255)",
+          borderRadius: '8px',
+          WebkitMaskImage: `radial-gradient(40% 40% at ${position.x}px ${position.y}px, black 45%, transparent)`
+        }}
+      />
       {children}
     </section>
   )