Button

"use client";

import { Button } from "@dashboardpack/core/components/ui/button";
import { Plus, LoaderCircle } from "lucide-react";

import { useState } from "react";

export default function ButtonExample() {
  const [count, setCount] = useState(0);
  return (
    <div className="space-y-6">
      <div className="flex flex-wrap gap-3">
        {(
          [
            "default",
            "secondary",
            "outline",
            "ghost",
            "destructive",
            "link",
          ] as const
        ).map((variant) => (
          <Button key={variant} variant={variant}>
            {variant}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-3">
        {(["xs", "sm", "default", "lg"] as const).map((size) => (
          <Button key={size} size={size} variant="outline">
            {size}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-3">
        {(["icon-xs", "icon-sm", "icon", "icon-lg"] as const).map((size) => (
          <Button key={size} size={size} aria-label={`Add project (${size})`}>
            <Plus />
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap gap-3">
        <Button disabled>Disabled</Button>
        <Button disabled>
          <LoaderCircle className="animate-spin motion-reduce:animate-none" />{" "}
          Saving
        </Button>
        <Button onClick={() => setCount(count + 1)}>
          Clicked {count} times
        </Button>
      </div>
    </div>
  );
}