| 1 | "use client"; |
| 2 | |
| 3 | import { useCallback, useId, useRef } from "react"; |
| 4 | |
| 5 | interface Props { |
| 6 | size?: number; |
| 7 | } |
| 8 | |
| 9 | export function GroveLogo({ size = 24 }: Props) { |
| 10 | const svgRef = useRef<SVGSVGElement>(null); |
| 11 | const id = useId(); |
| 12 | const styleId = id.replace(/:/g, ""); |
| 13 | |
| 14 | const onMouseMove = useCallback((e: React.MouseEvent<SVGSVGElement>) => { |
| 15 | const rect = e.currentTarget.getBoundingClientRect(); |
| 16 | const relX = ((e.clientX - rect.left) / rect.width - 0.5) * 2; |
| 17 | e.currentTarget.style.setProperty("--sway", `${relX * 6}deg`); |
| 18 | }, []); |
| 19 | |
| 20 | const onMouseLeave = useCallback((e: React.MouseEvent<SVGSVGElement>) => { |
| 21 | e.currentTarget.style.setProperty("--sway", "0deg"); |
| 22 | }, []); |
| 23 | |
| 24 | return ( |
| 25 | <svg |
| 26 | ref={svgRef} |
| 27 | className={`grove-logo-${styleId}`} |
| 28 | width={size} |
| 29 | height={size} |
| 30 | viewBox="0 0 64 64" |
| 31 | fill="none" |
| 32 | onMouseMove={onMouseMove} |
| 33 | onMouseLeave={onMouseLeave} |
| 34 | > |
| 35 | <style>{` |
| 36 | .grove-logo-${styleId} { |
| 37 | cursor: pointer; |
| 38 | transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); |
| 39 | } |
| 40 | .grove-logo-${styleId}:hover, |
| 41 | .hover-row:hover .grove-logo-${styleId} { |
| 42 | } |
| 43 | .grove-logo-${styleId} .gl-bg { |
| 44 | transition: fill 0.6s ease; |
| 45 | } |
| 46 | .grove-logo-${styleId}:hover .gl-bg, |
| 47 | .hover-row:hover .grove-logo-${styleId} .gl-bg { |
| 48 | filter: brightness(0.9); |
| 49 | } |
| 50 | .grove-logo-${styleId} .gl-tree { |
| 51 | transform-origin: 30px 52px; |
| 52 | transform: rotate(var(--sway, 0deg)); |
| 53 | transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); |
| 54 | } |
| 55 | .grove-logo-${styleId}:hover .gl-tree, |
| 56 | .hover-row:hover .grove-logo-${styleId} .gl-tree { |
| 57 | transition: transform 0.15s ease-out; |
| 58 | } |
| 59 | .grove-logo-${styleId} .gl-branch { |
| 60 | transition: stroke-width 0.5s cubic-bezier(0.25, 1, 0.5, 1); |
| 61 | } |
| 62 | .grove-logo-${styleId}:hover .gl-b0, .hover-row:hover .grove-logo-${styleId} .gl-b0 { stroke-width: 4.5; transition-delay: 0s; } |
| 63 | .grove-logo-${styleId}:hover .gl-b1, .hover-row:hover .grove-logo-${styleId} .gl-b1 { stroke-width: 3.5; transition-delay: 0.05s; } |
| 64 | .grove-logo-${styleId}:hover .gl-b2, .hover-row:hover .grove-logo-${styleId} .gl-b2 { stroke-width: 3; transition-delay: 0.1s; } |
| 65 | .grove-logo-${styleId}:hover .gl-b3, .hover-row:hover .grove-logo-${styleId} .gl-b3 { stroke-width: 2.5; transition-delay: 0.15s; } |
| 66 | .grove-logo-${styleId} .gl-node { |
| 67 | transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); |
| 68 | } |
| 69 | .grove-logo-${styleId} .gl-n0 { transform-origin: 30px 52px; } |
| 70 | .grove-logo-${styleId} .gl-n1 { transform-origin: 34px 8px; } |
| 71 | .grove-logo-${styleId} .gl-n2 { transform-origin: 48px 23px; } |
| 72 | .grove-logo-${styleId} .gl-n3 { transform-origin: 14px 33px; } |
| 73 | .grove-logo-${styleId} .gl-n4 { transform-origin: 19px 11px; } |
| 74 | .grove-logo-${styleId}:hover .gl-node, .hover-row:hover .grove-logo-${styleId} .gl-node { transform: scale(1.25); } |
| 75 | .grove-logo-${styleId}:hover .gl-n0, .hover-row:hover .grove-logo-${styleId} .gl-n0 { transition-delay: 0s; } |
| 76 | .grove-logo-${styleId}:hover .gl-n3, .hover-row:hover .grove-logo-${styleId} .gl-n3 { transition-delay: 0.05s; } |
| 77 | .grove-logo-${styleId}:hover .gl-n2, .hover-row:hover .grove-logo-${styleId} .gl-n2 { transition-delay: 0.1s; } |
| 78 | .grove-logo-${styleId}:hover .gl-n4, .hover-row:hover .grove-logo-${styleId} .gl-n4 { transition-delay: 0.15s; } |
| 79 | .grove-logo-${styleId}:hover .gl-n1, .hover-row:hover .grove-logo-${styleId} .gl-n1 { transition-delay: 0.2s; } |
| 80 | `}</style> |
| 81 | |
| 82 | <circle cx="32" cy="32" r="32" fill="var(--accent)" className="gl-bg" /> |
| 83 | |
| 84 | <g className="gl-tree"> |
| 85 | <path className="gl-branch gl-b0" d="M30,52 C29,44 33,37 31,30 C29,23 32,16 34,8" stroke="white" strokeWidth="4" fill="none" strokeLinecap="round"/> |
| 86 | <path className="gl-branch gl-b1" d="M32,31 C37,28 42,26 48,23" stroke="white" strokeWidth="3" fill="none" strokeLinecap="round"/> |
| 87 | <path className="gl-branch gl-b2" d="M30,40 C25,37 20,35 14,33" stroke="white" strokeWidth="2.5" fill="none" strokeLinecap="round"/> |
| 88 | <path className="gl-branch gl-b3" d="M33,18 C29,15 24,13 19,11" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round"/> |
| 89 | |
| 90 | <circle className="gl-node gl-n0" cx="30" cy="52" r="4" fill="white"/> |
| 91 | <circle className="gl-node gl-n1" cx="34" cy="8" r="3.5" fill="white"/> |
| 92 | <circle className="gl-node gl-n2" cx="48" cy="23" r="3.5" fill="white"/> |
| 93 | <circle className="gl-node gl-n3" cx="14" cy="33" r="3" fill="white"/> |
| 94 | <circle className="gl-node gl-n4" cx="19" cy="11" r="2.5" fill="white"/> |
| 95 | </g> |
| 96 | </svg> |
| 97 | ); |
| 98 | } |
| 99 | |