Spinner Pixel Grid

import { SpinnerPixelGrid } from "@/components/ui/spinner-pixel-grid";

export default function Default() {
  return (
    <div className="flex min-h-[440px] w-full flex-col items-center justify-center gap-14 bg-black text-yellow-300">
      <SpinnerPixelGrid
        variant="spiral"
        size={16}
        gridSize={5}
        color="#fde047"
        rainbow
      />

      <div className="flex flex-wrap items-center justify-center gap-16">
        <div className="flex flex-col items-center gap-4">
          <SpinnerPixelGrid
            variant="wave"
            size={11}
            gridSize={5}
            color="#22d3ee"
          />
          <span className="text-xs text-gray-500">wave</span>
        </div>
        <div className="flex flex-col items-center gap-4">
          <SpinnerPixelGrid
            variant="heart"
            shape="circle"
            size={11}
            gridSize={5}
            color="#f43f5e"
          />
          <span className="text-xs text-gray-500">heart</span>
        </div>
        <div className="flex flex-col items-center gap-4">
          <SpinnerPixelGrid
            variant="chase"
            size={11}
            gridSize={5}
            color="#a78bfa"
          />
          <span className="text-xs text-gray-500">chase</span>
        </div>
      </div>
    </div>
  );
}