diff options
Diffstat (limited to 'src/components/Card.tsx')
| -rw-r--r-- | src/components/Card.tsx | 82 |
1 files changed, 0 insertions, 82 deletions
diff --git a/src/components/Card.tsx b/src/components/Card.tsx deleted file mode 100644 index e71cf33..0000000 --- a/src/components/Card.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { useRef, useState } from "react"; - -function Icon() { - return <svg className="no-global w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M18 13v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6M15 6h4m0 0v4m0-4L10 15" /></svg>; -} - -interface Props { - title: string; - body: string; - href?: string; - imgSrc?: string; -} - -export default function CardLink({ title, body, href, imgSrc }: Props) { - const divRef = useRef<HTMLDivElement>(null); - const [position, setPosition] = useState({ x: 0, y: 0 }); - const [opacity, setOpacity] = useState(0); - - const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => { - if (!divRef.current) return; - const rect = divRef.current.getBoundingClientRect(); - setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top }); - }; - - const handleMouseEnter = () => setOpacity(0.6); - const handleMouseLeave = () => setOpacity(0); - - return ( - <div - ref={divRef} - className={`relative flex items-center gap-4 py-2 px-2 rounded-lg border border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 overflow-hidden ${ - href ? "cursor-pointer" : "" - } - [--spotlight-light:rgba(255,255,255,0.1)] - [--spotlight-dark:rgba(0,0,0,0.1)]`} - onMouseMove={handleMouseMove} - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - {...(href && { - onClick: () => window.open(href, "_blank", "noopener,noreferrer"), - role: "link", - tabIndex: 0, - })} - > - {/* Spotlight overlay - light */} - <div - className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out" - style={{ - opacity, - background: `radial-gradient(circle at ${position.x}px ${position.y}px, - var(--spotlight-light), - transparent 80%)`, - }} - /> - - {/* Spotlight overlay - dark mode */} - <div - className="absolute inset-0 opacity-0 transition-opacity duration-300 ease-in-out dark:block" - style={{ - opacity, - background: `radial-gradient(circle at ${position.x}px ${position.y}px, - var(--spotlight-dark), - transparent 80%)`, - }} - /> - - {/* Content */} - {imgSrc && ( - <img - src={imgSrc} - className="w-20 h-20 object-cover rounded-lg" - alt={title} - /> - )} - <div className="flex-1"> - <h3 className="font-medium">{title}</h3> - <p className="text-sm text-neutral-800 dark:text-neutral-400">{body}</p> - </div> - {href && <Icon />} - </div> - ); -} |
