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