Smoke Flare Button

components/jackui/smoke-flare-button.tsx

"use client";

import React from "react";
import { SmokeFlareButton } from "@/components/jackui/smoke-flare-button";
import { Sparkles } from "lucide-react";

export function SmokeFlareButtonDemo() {
  const handleClick = () => {
    console.log("Action triggered!");
  };

  return (
    <div className="flex min-h-[30rem] w-full flex-wrap items-center justify-center gap-6 p-8">
      {/* Cosmic Nebula theme with leading icon */}
      <SmokeFlareButton
        variant="cosmic"
        icon={<Sparkles className="w-4 h-4" />}
        onClick={handleClick}
      >
        Launch Experience
      </SmokeFlareButton>

      {/* Solar Ember variant */}
      <SmokeFlareButton
        variant="ember"
        label="Power Up"
      />

      {/* Arctic Aurora variant */}
      <SmokeFlareButton
        variant="aurora"
        label="Explore World"
      />

      {/* Stealth Titanium variant */}
      <SmokeFlareButton
        variant="monochrome"
        label="Documentation"
      />
    </div>
  );
}