| 9f470a7 | | | 1 | "use client"; |
| 9f470a7 | | | 2 | |
| 9f470a7 | | | 3 | import { useId } from "react"; |
| 9f470a7 | | | 4 | |
| bf6031c | | | 5 | interface Props { |
| bf6031c | | | 6 | size?: number; |
| bf6031c | | | 7 | } |
| bf6031c | | | 8 | |
| bf6031c | | | 9 | export function CollabLogo({ size = 24 }: Props) { |
| 9f470a7 | | | 10 | const id = useId(); |
| 9f470a7 | | | 11 | const s = id.replace(/:/g, ""); |
| 9f470a7 | | | 12 | |
| bf6031c | | | 13 | return ( |
| 9f470a7 | | | 14 | <svg |
| 9f470a7 | | | 15 | className={`collab-logo-${s}`} |
| 9f470a7 | | | 16 | width={size} |
| 9f470a7 | | | 17 | height={size} |
| 9f470a7 | | | 18 | viewBox="0 0 64 64" |
| 9f470a7 | | | 19 | fill="none" |
| 9f470a7 | | | 20 | > |
| 9f470a7 | | | 21 | <style>{` |
| 9f470a7 | | | 22 | .collab-logo-${s} { |
| 9f470a7 | | | 23 | cursor: pointer; |
| 9f470a7 | | | 24 | transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); |
| 9f470a7 | | | 25 | } |
| 9f470a7 | | | 26 | .collab-logo-${s}:hover, |
| 9f470a7 | | | 27 | .hover-row:hover .collab-logo-${s} { |
| 9f470a7 | | | 28 | transform: translateY(-2px); |
| 9f470a7 | | | 29 | } |
| 9f470a7 | | | 30 | .collab-logo-${s} .cb-bg { |
| 9f470a7 | | | 31 | transition: filter 0.6s ease; |
| 9f470a7 | | | 32 | } |
| 9f470a7 | | | 33 | .collab-logo-${s}:hover .cb-bg, |
| 9f470a7 | | | 34 | .hover-row:hover .collab-logo-${s} .cb-bg { |
| 9f470a7 | | | 35 | filter: brightness(0.9); |
| 9f470a7 | | | 36 | } |
| 9f470a7 | | | 37 | .collab-logo-${s} .cb-top { |
| 9f470a7 | | | 38 | transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); |
| 9f470a7 | | | 39 | } |
| 9f470a7 | | | 40 | .collab-logo-${s}:hover .cb-top, |
| 9f470a7 | | | 41 | .hover-row:hover .collab-logo-${s} .cb-top { |
| 9f470a7 | | | 42 | transform: translate(-1.5px, -2px); |
| 9f470a7 | | | 43 | } |
| 9f470a7 | | | 44 | .collab-logo-${s} .cb-bottom { |
| 9f470a7 | | | 45 | transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; |
| 9f470a7 | | | 46 | } |
| 9f470a7 | | | 47 | .collab-logo-${s}:hover .cb-bottom, |
| 9f470a7 | | | 48 | .hover-row:hover .collab-logo-${s} .cb-bottom { |
| 9f470a7 | | | 49 | transform: translate(1.5px, 2px); |
| 9f470a7 | | | 50 | } |
| 9f470a7 | | | 51 | `}</style> |
| 9f470a7 | | | 52 | |
| 9f470a7 | | | 53 | <circle cx="32" cy="32" r="32" fill="var(--accent)" className="cb-bg" /> |
| bf6031c | | | 54 | {/* Top-left bubble — tail points left */} |
| bf6031c | | | 55 | <path |
| 9f470a7 | | | 56 | className="cb-top" |
| bf6031c | | | 57 | d="M9 16 C9 11, 14 8, 21 8 L35 8 C42 8, 47 11, 47 16 L47 24 C47 29, 42 32, 35 32 L19 32 L13 37 L13 32 C10 31, 9 29, 9 24 Z" |
| bf6031c | | | 58 | fill="white" |
| bf6031c | | | 59 | /> |
| bf6031c | | | 60 | {/* Bottom-right bubble — mirrored, tail points right */} |
| bf6031c | | | 61 | <path |
| 9f470a7 | | | 62 | className="cb-bottom" |
| bf6031c | | | 63 | d="M55 35 C55 30, 50 27, 43 27 L29 27 C22 27, 17 30, 17 35 L17 43 C17 48, 22 51, 29 51 L45 51 L51 56 L51 51 C54 50, 55 48, 55 43 Z" |
| bf6031c | | | 64 | fill="white" |
| bf6031c | | | 65 | opacity="0.65" |
| bf6031c | | | 66 | /> |
| bf6031c | | | 67 | </svg> |
| bf6031c | | | 68 | ); |
| bf6031c | | | 69 | } |