Snake Loader

import { SnakeLoader } from "@/components/ui/snake-loader";

// A casual snake game as a loading spinner. The snake wanders an 8×8 grid,
// eats, grows, and resets when it traps itself. Each cell shows a preset
// theme plus a few of the props you can pass.
export default function SnakeLoaderDemo() {
  return (
    <div className="flex flex-wrap items-center gap-10 p-8">
      <Swatch label="nokia (default)">
        <SnakeLoader cellSize={6} />
      </Swatch>

      <Swatch label="neon">
        <SnakeLoader theme="neon" cellSize={6} />
      </Swatch>

      <Swatch label="minimal">
        <SnakeLoader theme="minimal" cellSize={6} />
      </Swatch>

      <Swatch label="custom colors">
        <SnakeLoader
          theme="custom"
          cellSize={6}
          colors={{
            snake: "#1b1b3a",
            food: "#ffe600",
            grid: "rgba(27, 27, 58, 0.2)",
            background: "#ff6b35",
            glow: "transparent",
          }}
          effects={{ glow: false, pulse: true }}
        />
      </Swatch>

      <Swatch label="inline in a button">
        <button
          type="button"
          className="inline-flex items-center gap-2 rounded-md bg-zinc-900 px-4 py-2 text-sm text-zinc-100"
        >
          <SnakeLoader theme="minimal" cellSize={2} />
          Loading…
        </button>
      </Swatch>
    </div>
  );
}

function Swatch({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <div className="flex flex-col items-center gap-3">
      {children}
      <span className="text-xs text-muted-foreground">{label}</span>
    </div>
  );
}