| 1 | "use client"; |
| 2 | |
| 3 | import { useId } from "react"; |
| 4 | |
| 5 | interface Props { |
| 6 | size?: number; |
| 7 | } |
| 8 | |
| 9 | export function RingLogo({ size = 24 }: Props) { |
| 10 | const id = useId(); |
| 11 | const s = id.replace(/:/g, ""); |
| 12 | |
| 13 | return ( |
| 14 | <svg |
| 15 | className={`ring-logo-${s}`} |
| 16 | width={size} |
| 17 | height={size} |
| 18 | viewBox="0 0 64 64" |
| 19 | fill="none" |
| 20 | > |
| 21 | <style>{` |
| 22 | .ring-logo-${s} { |
| 23 | cursor: pointer; |
| 24 | transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); |
| 25 | } |
| 26 | .ring-logo-${s}:hover, |
| 27 | .hover-row:hover .ring-logo-${s} { |
| 28 | transform: translateY(-2px); |
| 29 | } |
| 30 | .ring-logo-${s} .rl-bg { |
| 31 | transition: filter 0.6s ease; |
| 32 | } |
| 33 | .ring-logo-${s}:hover .rl-bg, |
| 34 | .hover-row:hover .ring-logo-${s} .rl-bg { |
| 35 | filter: brightness(0.9); |
| 36 | } |
| 37 | .ring-logo-${s} .rl-outer { |
| 38 | transform-origin: 32px 32px; |
| 39 | transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), stroke-width 0.4s ease; |
| 40 | } |
| 41 | .ring-logo-${s}:hover .rl-outer, |
| 42 | .hover-row:hover .ring-logo-${s} .rl-outer { |
| 43 | transform: rotate(15deg) scale(1.04); |
| 44 | stroke-width: 3; |
| 45 | } |
| 46 | .ring-logo-${s} .rl-inner { |
| 47 | transform-origin: 32px 34px; |
| 48 | transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.05s, stroke-width 0.4s ease 0.05s; |
| 49 | } |
| 50 | .ring-logo-${s}:hover .rl-inner, |
| 51 | .hover-row:hover .ring-logo-${s} .rl-inner { |
| 52 | transform: rotate(-20deg) scale(1.06); |
| 53 | stroke-width: 2.6; |
| 54 | } |
| 55 | .ring-logo-${s} .rl-dot { |
| 56 | transform-origin: 32px 34px; |
| 57 | transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s; |
| 58 | } |
| 59 | .ring-logo-${s}:hover .rl-dot, |
| 60 | .hover-row:hover .ring-logo-${s} .rl-dot { |
| 61 | transform: scale(1.35); |
| 62 | } |
| 63 | `}</style> |
| 64 | |
| 65 | <circle cx="32" cy="32" r="32" fill="var(--accent)" className="rl-bg" /> |
| 66 | <path |
| 67 | className="rl-outer" |
| 68 | d="M32 12C42 12 51 19 52 29C53 39 46 49 36 51C26 53 15 48 12 39C9 30 13 19 23 14C26 13 29 12 32 12Z" |
| 69 | stroke="white" |
| 70 | strokeWidth="2.6" |
| 71 | strokeLinecap="round" |
| 72 | strokeLinejoin="round" |
| 73 | /> |
| 74 | <path |
| 75 | className="rl-inner" |
| 76 | d="M32 24C37 24 41 27 42 32C43 37 40 41 35 43C30 45 24 43 21 38C18 33 19 28 24 25C26 24 29 24 32 24Z" |
| 77 | stroke="white" |
| 78 | strokeWidth="2.2" |
| 79 | strokeLinecap="round" |
| 80 | strokeLinejoin="round" |
| 81 | /> |
| 82 | <ellipse className="rl-dot" cx="32" cy="34" rx="3.2" ry="2.6" fill="white" /> |
| 83 | </svg> |
| 84 | ); |
| 85 | } |
| 86 | |