export function OrbitSpinner() {
  return (
    <div className="grid min-h-[200px] place-items-center bg-[#F4F3EF] p-16">
      <div className="text-center">
        <div className="relative mx-auto h-12 w-12">
          <span className="absolute inset-0 rounded-full border border-[#1111111A]" />
          <span
            className="absolute inset-0"
            style={{ animation: "orbit 1.4s linear infinite" }}
          >
            <span className="absolute left-1/2 top-0 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-[#2A3D2F]" />
          </span>
          <span
            className="absolute inset-2"
            style={{ animation: "orbit 1.4s linear infinite reverse" }}
          >
            <span className="absolute left-1/2 top-0 h-1.5 w-1.5 -translate-x-1/2 rounded-full bg-[#6B6B66]" />
          </span>
        </div>
        <div className="mt-5 font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66]">
          Loading workspace
        </div>
      </div>

      <style>{`
        @keyframes orbit { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}
Orbit Spinner
