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	}
9f470a7	29	.ring-logo-${s} .rl-bg {
9f470a7	30	transition: filter 0.6s ease;
9f470a7	31	}
9f470a7	32	.ring-logo-${s}:hover .rl-bg,
9f470a7	33	.hover-row:hover .ring-logo-${s} .rl-bg {
9f470a7	34	filter: brightness(0.9);
9f470a7	35	}
9f470a7	36	.ring-logo-${s} .rl-outer {
9f470a7	37	transform-origin: 32px 32px;
9f470a7	38	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), stroke-width 0.4s ease;
9f470a7	39	}
9f470a7	40	.ring-logo-${s}:hover .rl-outer,
9f470a7	41	.hover-row:hover .ring-logo-${s} .rl-outer {
9f470a7	42	transform: rotate(15deg) scale(1.04);
9f470a7	43	stroke-width: 3;
9f470a7	44	}
9f470a7	45	.ring-logo-${s} .rl-inner {
9f470a7	46	transform-origin: 32px 34px;
9f470a7	47	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.05s, stroke-width 0.4s ease 0.05s;
9f470a7	48	}
9f470a7	49	.ring-logo-${s}:hover .rl-inner,
9f470a7	50	.hover-row:hover .ring-logo-${s} .rl-inner {
9f470a7	51	transform: rotate(-20deg) scale(1.06);
9f470a7	52	stroke-width: 2.6;
9f470a7	53	}
9f470a7	54	.ring-logo-${s} .rl-dot {
9f470a7	55	transform-origin: 32px 34px;
9f470a7	56	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
9f470a7	57	}
9f470a7	58	.ring-logo-${s}:hover .rl-dot,
9f470a7	59	.hover-row:hover .ring-logo-${s} .rl-dot {
9f470a7	60	transform: scale(1.35);
9f470a7	61	}
9f470a7	62	`}</style>
9f470a7	63
9f470a7	64	<circle cx="32" cy="32" r="32" fill="var(--accent)" className="rl-bg" />
3cbdca6	65	<path
9f470a7	66	className="rl-outer"
3cbdca6	67	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	68	stroke="white"
3cbdca6	69	strokeWidth="2.6"
3cbdca6	70	strokeLinecap="round"
3cbdca6	71	strokeLinejoin="round"
3cbdca6	72	/>
3cbdca6	73	<path
9f470a7	74	className="rl-inner"
3cbdca6	75	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	76	stroke="white"
3cbdca6	77	strokeWidth="2.2"
3cbdca6	78	strokeLinecap="round"
3cbdca6	79	strokeLinejoin="round"
3cbdca6	80	/>
9f470a7	81	<ellipse className="rl-dot" cx="32" cy="34" rx="3.2" ry="2.6" fill="white" />
3cbdca6	82	</svg>
3cbdca6	83	);
3cbdca6	84	}