feat: structure

2026-05-31 17:49:29 +03:00
parent 67993ae3ec
commit 22afa7e1a5
29 changed files with 860 additions and 684 deletions
@@ -0,0 +1,45 @@
+import { useId, type ComponentPropsWithoutRef } from 'react';
+import { cx } from '../utils';
+
+export const Spinner = ({
+  size,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
+  const gid = `modern-sk-groove-${useId()}`;
+  return (
+    <span
+      role="status"
+      aria-label="Loading"
+      className={cx('modern-sk-spinner', size && `modern-sk-spinner--${size}`, className)}
+      {...props}
+    >
+      <svg viewBox="0 0 36 36" fill="none">
+        <defs>
+          <linearGradient
+            id={gid}
+            x1="18"
+            y1="4"
+            x2="18"
+            y2="32"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="var(--spin-groove-1)" />
+            <stop offset="1" stopColor="var(--spin-groove-2)" />
+          </linearGradient>
+        </defs>
+        <circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
+        <circle
+          className="modern-sk-spinner__arc"
+          cx="18"
+          cy="18"
+          r="14"
+          stroke="var(--lime)"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeDasharray="22 88"
+        />
+      </svg>
+    </span>
+  );
+};