Multi Step Loader

"use client";
import React, { useState } from "react";
import { MultiStepLoader as Loader } from "@/lab/aceternity/ui/multi-step-loader";
import { IconSquareRoundedX } from "@tabler/icons-react";

const loadingStates = [
  {
    text: "Buying a condo",
  },
  {
    text: "Travelling in a flight",
  },
  {
    text: "Meeting Tyler Durden",
  },
  {
    text: "He makes soap",
  },
  {
    text: "We goto a bar",
  },
  {
    text: "Start a fight",
  },
  {
    text: "We like it",
  },
  {
    text: "Welcome to F**** C***",
  },
];

export default function MultiStepLoaderDemo() {
  // Starts running so the stage animates on sight; close it to get the button.
  const [loading, setLoading] = useState(true);
  return (
    <div className="relative flex h-full w-full items-center justify-center overflow-hidden">
      {/* Core Loader Modal */}
      <Loader loadingStates={loadingStates} loading={loading} duration={2000} />

      <button
        type="button"
        onClick={() => setLoading(true)}
        className="mx-auto flex h-10 items-center justify-center rounded-lg bg-[#39C3EF] px-8 text-sm font-medium text-black transition duration-200 hover:bg-[#39C3EF]/90"
        style={{
          boxShadow:
            "0px -1px 0px 0px #ffffff40 inset, 0px 1px 0px 0px #ffffff40 inset",
        }}
      >
        Click to load
      </button>

      {loading && (
        <button
          type="button"
          aria-label="Close loader"
          className="absolute top-3 right-3 z-[120] text-black dark:text-white"
          onClick={() => setLoading(false)}
        >
          <IconSquareRoundedX className="h-8 w-8" />
        </button>
      )}
    </div>
  );
}