Loader

"use client";
import React from "react";
import {
  LoaderFive,
  LoaderFour,
  LoaderOne,
  LoaderThree,
  LoaderTwo,
} from "@/lab/aceternity/ui/loader";

const cells: { name: string; node: React.ReactNode }[] = [
  { name: "LoaderOne", node: <LoaderOne /> },
  { name: "LoaderTwo", node: <LoaderTwo /> },
  {
    name: "LoaderThree",
    node: (
      <div className="origin-center scale-[0.6]">
        <LoaderThree />
      </div>
    ),
  },
  { name: "LoaderFour", node: <LoaderFour text="Loading..." /> },
  { name: "LoaderFive", node: <LoaderFive text="Generating chunks..." /> },
];

export default function LoaderDemo() {
  return (
    <div className="relative flex h-full w-full items-center justify-center p-[4%]">
      <div className="grid h-full w-full grid-cols-3 grid-rows-2 gap-2">
        {cells.map((cell, i) => (
          <div
            key={cell.name}
            className={
              "relative flex items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white/60 text-sm dark:border-neutral-800 dark:bg-neutral-900/60" +
              (i === 4 ? " col-span-2" : "")
            }
          >
            {cell.node}
            <span className="absolute bottom-1.5 left-2 font-mono text-[10px] text-neutral-400">
              {cell.name}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}