| 9f470a7 | | | 1 | "use client"; |
| 9f470a7 | | | 2 | |
| 9f470a7 | | | 3 | import { useCallback, useId, useRef } from "react"; |
| 9f470a7 | | | 4 | |
| 603c6c9 | | | 5 | interface Props { |
| 603c6c9 | | | 6 | size?: number; |
| 603c6c9 | | | 7 | } |
| 603c6c9 | | | 8 | |
| 603c6c9 | | | 9 | export function CanopyLogo({ size = 24 }: Props) { |
| 9f470a7 | | | 10 | const svgRef = useRef<SVGSVGElement>(null); |
| 9f470a7 | | | 11 | const id = useId(); |
| 9f470a7 | | | 12 | const s = id.replace(/:/g, ""); |
| 9f470a7 | | | 13 | |
| 9f470a7 | | | 14 | const onMouseMove = useCallback((e: React.MouseEvent<SVGSVGElement>) => { |
| 9f470a7 | | | 15 | const rect = e.currentTarget.getBoundingClientRect(); |
| 9f470a7 | | | 16 | const relX = ((e.clientX - rect.left) / rect.width - 0.5) * 2; |
| 9f470a7 | | | 17 | e.currentTarget.style.setProperty("--sway", `${relX * 5}deg`); |
| 9f470a7 | | | 18 | }, []); |
| 9f470a7 | | | 19 | |
| 9f470a7 | | | 20 | const onMouseLeave = useCallback((e: React.MouseEvent<SVGSVGElement>) => { |
| 9f470a7 | | | 21 | e.currentTarget.style.setProperty("--sway", "0deg"); |
| 9f470a7 | | | 22 | }, []); |
| 9f470a7 | | | 23 | |
| 603c6c9 | | | 24 | return ( |
| 603c6c9 | | | 25 | <svg |
| 9f470a7 | | | 26 | ref={svgRef} |
| 9f470a7 | | | 27 | className={`canopy-logo-${s}`} |
| 603c6c9 | | | 28 | width={size} |
| 603c6c9 | | | 29 | height={size} |
| 603c6c9 | | | 30 | viewBox="0 0 64 64" |
| 603c6c9 | | | 31 | fill="none" |
| 9f470a7 | | | 32 | onMouseMove={onMouseMove} |
| 9f470a7 | | | 33 | onMouseLeave={onMouseLeave} |
| 603c6c9 | | | 34 | > |
| 9f470a7 | | | 35 | <style>{` |
| 9f470a7 | | | 36 | .canopy-logo-${s} { |
| 9f470a7 | | | 37 | cursor: pointer; |
| 9f470a7 | | | 38 | transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); |
| 9f470a7 | | | 39 | } |
| 9f470a7 | | | 40 | .canopy-logo-${s}:hover, |
| 9f470a7 | | | 41 | .hover-row:hover .canopy-logo-${s} { |
| 9f470a7 | | | 42 | transform: translateY(-2px); |
| 9f470a7 | | | 43 | } |
| 9f470a7 | | | 44 | .canopy-logo-${s} .cl-bg { |
| 9f470a7 | | | 45 | transition: filter 0.6s ease; |
| 9f470a7 | | | 46 | } |
| 9f470a7 | | | 47 | .canopy-logo-${s}:hover .cl-bg, |
| 9f470a7 | | | 48 | .hover-row:hover .canopy-logo-${s} .cl-bg { |
| 9f470a7 | | | 49 | filter: brightness(0.9); |
| 9f470a7 | | | 50 | } |
| 9f470a7 | | | 51 | .canopy-logo-${s} .cl-canopy { |
| 9f470a7 | | | 52 | transform-origin: 31px 42px; |
| 9f470a7 | | | 53 | transform: rotate(var(--sway, 0deg)); |
| 9f470a7 | | | 54 | transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); |
| 9f470a7 | | | 55 | } |
| 9f470a7 | | | 56 | .canopy-logo-${s}:hover .cl-canopy, |
| 9f470a7 | | | 57 | .hover-row:hover .canopy-logo-${s} .cl-canopy { |
| 9f470a7 | | | 58 | transition: transform 0.15s ease-out; |
| 9f470a7 | | | 59 | } |
| 9f470a7 | | | 60 | .canopy-logo-${s} .cl-trunk { |
| 9f470a7 | | | 61 | transition: stroke-width 0.4s cubic-bezier(0.25, 1, 0.5, 1); |
| 9f470a7 | | | 62 | } |
| 9f470a7 | | | 63 | .canopy-logo-${s}:hover .cl-trunk, |
| 9f470a7 | | | 64 | .hover-row:hover .canopy-logo-${s} .cl-trunk { |
| 9f470a7 | | | 65 | stroke-width: 3.2; |
| 9f470a7 | | | 66 | } |
| 9f470a7 | | | 67 | .canopy-logo-${s} .cl-root { |
| 9f470a7 | | | 68 | transition: stroke-width 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; |
| 9f470a7 | | | 69 | } |
| 9f470a7 | | | 70 | .canopy-logo-${s}:hover .cl-root, |
| 9f470a7 | | | 71 | .hover-row:hover .canopy-logo-${s} .cl-root { |
| 9f470a7 | | | 72 | stroke-width: 2.2; |
| 9f470a7 | | | 73 | } |
| 9f470a7 | | | 74 | `}</style> |
| 9f470a7 | | | 75 | |
| 9f470a7 | | | 76 | <circle cx="32" cy="32" r="32" fill="var(--accent)" className="cl-bg" /> |
| 9f470a7 | | | 77 | <g className="cl-canopy"> |
| 9f470a7 | | | 78 | <path className="cl-trunk" d="M31 42 L30 53" stroke="white" strokeWidth="2.5" strokeLinecap="round"/> |
| 9f470a7 | | | 79 | <path className="cl-root" d="M30.5 46 L34 49.5" stroke="white" strokeWidth="1.5" strokeLinecap="round"/> |
| 9f470a7 | | | 80 | <path d=" |
| 9f470a7 | | | 81 | M31 42 |
| 9f470a7 | | | 82 | C18 40, 11 32, 14 24 |
| 9f470a7 | | | 83 | C16 17, 24 12, 31 14 |
| 9f470a7 | | | 84 | C33 10, 40 12, 43 16 |
| 9f470a7 | | | 85 | C48 14, 52 22, 49 28 |
| 9f470a7 | | | 86 | C52 34, 46 40, 38 40 |
| 9f470a7 | | | 87 | C36 42, 33 43, 31 42 |
| 9f470a7 | | | 88 | Z |
| 9f470a7 | | | 89 | " fill="white"/> |
| 9f470a7 | | | 90 | </g> |
| 603c6c9 | | | 91 | </svg> |
| 603c6c9 | | | 92 | ); |
| 603c6c9 | | | 93 | } |