Blame · ring-logo.tsx

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