import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Spinner } from "../../../components/ui/spinner";

export default function Spinners() {
  return (
    <>
      <PageMeta
        title="React.js Spinners Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Spinners Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Size Variants">
          <div className="flex flex-wrap items-center gap-6">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Small
              </p>
              <Spinner size="sm" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Medium
              </p>
              <Spinner size="md" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Large
              </p>
              <Spinner size="lg" />
            </div>
          </div>
        </ComponentCard>

        <ComponentCard title="Color Variants">
          <div className="flex flex-wrap items-center gap-6">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Primary
              </p>
              <Spinner color="primary" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Success
              </p>
              <Spinner color="success" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Error
              </p>
              <Spinner color="error" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Warning
              </p>
              <Spinner color="warning" />
            </div>
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
                Info
              </p>
              <Spinner color="info" />
            </div>
          </div>
        </ComponentCard>
      </div>
    </>
  );
}

