|
| 1 | +"use client" |
| 2 | + |
| 3 | +import React, { useEffect, useRef, useState, useMemo } from "react" |
| 4 | +import { cn } from "../lib/utils" |
| 5 | +import { MouseEnterContext, useMouseEnter } from "./hooks/mouseEnter" |
| 6 | + |
| 7 | +export interface CardContainerProps { |
| 8 | + children?: React.ReactNode |
| 9 | + className?: string |
| 10 | + containerClassName?: string |
| 11 | + href?: string |
| 12 | + onActivate?: () => void |
| 13 | +} |
| 14 | + |
| 15 | +export const CardContainer = ({ |
| 16 | + children, |
| 17 | + className, |
| 18 | + containerClassName, |
| 19 | + href, |
| 20 | + onActivate, |
| 21 | +}: CardContainerProps) => { |
| 22 | + const containerRef = useRef<HTMLDivElement>(null) |
| 23 | + const [isMouseEntered, setIsMouseEntered] = useState(false) |
| 24 | + |
| 25 | + const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => { |
| 26 | + if (!containerRef.current) { |
| 27 | + return |
| 28 | + } |
| 29 | + const { left, top, width, height } = containerRef.current.getBoundingClientRect() |
| 30 | + const x = (e.clientX - left - width / 2) / 25 |
| 31 | + const y = (e.clientY - top - height / 2) / 25 |
| 32 | + containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)` |
| 33 | + } |
| 34 | + |
| 35 | + const handleMouseEnter = () => { |
| 36 | + setIsMouseEntered(true) |
| 37 | + } |
| 38 | + |
| 39 | + const handleMouseLeave = () => { |
| 40 | + setIsMouseEntered(false) |
| 41 | + if (containerRef.current) { |
| 42 | + containerRef.current.style.transform = "rotateY(0deg) rotateX(0deg)" |
| 43 | + } |
| 44 | + } |
| 45 | + |
| 46 | + const handleClick = () => { |
| 47 | + if (onActivate) { |
| 48 | + onActivate() |
| 49 | + return |
| 50 | + } |
| 51 | + if (href) { |
| 52 | + window.open(href, "_blank") |
| 53 | + } |
| 54 | + } |
| 55 | + |
| 56 | + const contextValue = useMemo(() => [isMouseEntered, setIsMouseEntered] as const, [isMouseEntered]) |
| 57 | + |
| 58 | + return ( |
| 59 | + <MouseEnterContext.Provider value={contextValue}> |
| 60 | + <div |
| 61 | + className={cn("flex items-center justify-center", containerClassName)} |
| 62 | + style={{ |
| 63 | + perspective: "1000px", |
| 64 | + }} |
| 65 | + > |
| 66 | + <div |
| 67 | + className={cn( |
| 68 | + "flex items-center justify-center relative transition-all duration-200 ease-linear", |
| 69 | + className, |
| 70 | + )} |
| 71 | + tabIndex={0} |
| 72 | + onMouseEnter={handleMouseEnter} |
| 73 | + onMouseLeave={handleMouseLeave} |
| 74 | + onMouseMove={handleMouseMove} |
| 75 | + onClick={handleClick} |
| 76 | + onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => { |
| 77 | + // Activate on Enter or Space for accessibility |
| 78 | + if (e.key === "Enter" || e.key === " ") { |
| 79 | + e.preventDefault() |
| 80 | + handleClick() |
| 81 | + } |
| 82 | + }} |
| 83 | + ref={containerRef} |
| 84 | + style={{ |
| 85 | + transformStyle: "preserve-3d", |
| 86 | + }} |
| 87 | + > |
| 88 | + {children} |
| 89 | + </div> |
| 90 | + </div> |
| 91 | + </MouseEnterContext.Provider> |
| 92 | + ) |
| 93 | +} |
| 94 | + |
| 95 | +export interface CardBodyProps { |
| 96 | + children: React.ReactNode |
| 97 | + className?: string |
| 98 | +} |
| 99 | + |
| 100 | +export const CardBody = ({ children, className }: CardBodyProps) => { |
| 101 | + return ( |
| 102 | + <div |
| 103 | + className={cn( |
| 104 | + "h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d]", |
| 105 | + className, |
| 106 | + )} |
| 107 | + > |
| 108 | + {children} |
| 109 | + </div> |
| 110 | + ) |
| 111 | +} |
| 112 | + |
| 113 | +export type CardItemProps = { |
| 114 | + as?: React.ElementType |
| 115 | + children: React.ReactNode |
| 116 | + className?: string |
| 117 | + translateX?: number | string |
| 118 | + translateY?: number | string |
| 119 | + translateZ?: number | string |
| 120 | + rotateX?: number | string |
| 121 | + rotateY?: number | string |
| 122 | + rotateZ?: number | string |
| 123 | +} & Record<string, unknown> |
| 124 | + |
| 125 | +export const CardItem = ({ |
| 126 | + as: Tag = "div", |
| 127 | + children, |
| 128 | + className, |
| 129 | + translateX = 0, |
| 130 | + translateY = 0, |
| 131 | + translateZ = 0, |
| 132 | + rotateX = 0, |
| 133 | + rotateY = 0, |
| 134 | + rotateZ = 0, |
| 135 | + ...rest |
| 136 | +}: CardItemProps) => { |
| 137 | + const ref = useRef<HTMLElement | null>(null) |
| 138 | + const [isMouseEntered] = useMouseEnter() |
| 139 | + |
| 140 | + useEffect(() => { |
| 141 | + handleAnimations() |
| 142 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 143 | + }, [isMouseEntered]) |
| 144 | + |
| 145 | + const handleAnimations = () => { |
| 146 | + if (!ref.current) { |
| 147 | + return |
| 148 | + } |
| 149 | + const fmt = (v: number | string) => (typeof v === "number" ? `${v}px` : String(v ?? "0")) |
| 150 | + if (isMouseEntered) { |
| 151 | + ref.current.style.transform = `translateX(${fmt(translateX)}) translateY(${fmt( |
| 152 | + translateY, |
| 153 | + )}) translateZ(${fmt(translateZ)}) rotateX(${fmt(rotateX)}) rotateY(${fmt(rotateY)}) rotateZ(${fmt( |
| 154 | + rotateZ, |
| 155 | + )})` |
| 156 | + } else { |
| 157 | + ref.current.style.transform = |
| 158 | + "translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)" |
| 159 | + } |
| 160 | + } |
| 161 | + |
| 162 | + return React.createElement( |
| 163 | + Tag, |
| 164 | + { |
| 165 | + ref, |
| 166 | + className: cn("w-fit transition duration-200 ease-linear", className), |
| 167 | + ...rest, |
| 168 | + }, |
| 169 | + children, |
| 170 | + ) |
| 171 | +} |
0 commit comments