Gradient Button

import { CheckCircle, Lightbulb, Heart } from "lucide-react";
import { Component } from "@/components/ui/gradient-button";

export default function DemoOne() {
    return (
    <div className="min-h-screen bg-black flex items-center justify-center p-8 w-full">
      <div>
          <div className="rounded-2xl p-8 border border-gray-700 flex flex-col items-center">
            <h3 className="text-xl font-semibold text-white mb-6">Vertical</h3>
            <div className="mb-4 gap-1 flex flex-col">
                          <Component
                icon={<CheckCircle className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#10b981"
                textColor="text-green-200"
                label="Done"
                size="sm"
                className="max-w-[70px]"
                onClick={() => alert("Success tag clicked!")}
              />
              <Component
                icon={<Lightbulb className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#eab308"
                textColor="text-yellow-200"
                label="Brilliant Idea"
                size="md"
                onClick={() => alert("Idea tag clicked!")}
              />
                            <Component
                icon={<Heart className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#ec4899"
                textColor="text-pink-200"
                label="Favorite"
                size="lg"
              />
            </div>
        </div>
        <div className="mt-16 rounded-2xl p-8 border border-gray-700 flex flex-col items-center">
            <h3 className="text-xl font-semibold text-white mb-6">Horizontal</h3>
            <div className="mb-4 gap-3 flex">
                          <Component
                icon={<CheckCircle className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#10b981"
                textColor="text-green-200"
                label="Done"
                size="sm"
                className="max-w-[70px]"
                onClick={() => alert("Success tag clicked!")}
              />
              <Component
                icon={<Lightbulb className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#eab308"
                textColor="text-yellow-200"
                label="Brilliant Idea"
                size="md"
                onClick={() => alert("Idea tag clicked!")}
              />
                            <Component
                icon={<Heart className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#ec4899"
                textColor="text-pink-200"
                label="Favorite"
                size="lg"
              />
            </div>
        </div>
      </div>
    </div>
  );
}