Expandable Content Button

import ExpandableContentButton from "@/components/ruixen/expandable-content-button";
import { Twitter, Linkedin, Copy, Share, Mail } from "lucide-react";
 
export default function App() {
  const shareOptions = [
    {
      label: "Share on Twitter",
      icon: <Twitter className="w-4 h-4" />,
      onClick: () => console.log("Shared on Twitter"),
    },
    {
      label: "Share on LinkedIn",
      icon: <Linkedin className="w-4 h-4" />,
      onClick: () => console.log("Shared on LinkedIn"),
    },
    {
      label: "Copy Link",
      icon: <Copy className="w-4 h-4" />,
      onClick: () => console.log("Link copied"),
    },
    {
      label: "Send via Email",
      icon: <Mail className="w-4 h-4" />,
      onClick: () => console.log("Email sent"),
    },
  ];
 
  return (
    <div className="space-y-4">
      <ExpandableContentButton
        label="Share Article"
        options={shareOptions}
        size="md"
      />
 
      <ExpandableContentButton
        label="Export Data"
        options={[
          { label: "Export as PDF", onClick: () => console.log("PDF export") },
          { label: "Export as CSV", onClick: () => console.log("CSV export") },
          {
            label: "Export as Excel",
            onClick: () => console.log("Excel export"),
          },
        ]}
        size="sm"
        className="bg-green-500 hover:bg-green-600"
      />
    </div>
  );
}

interface Option {
  label: string;
  icon?: React.ReactNode;
  onClick: () => void;
}

// Small button
<ExpandableContentButton size="sm" label="Actions" options={options} />
 
// Medium button (default)
<ExpandableContentButton size="md" label="Share" options={options} />
 
// Large button
<ExpandableContentButton size="lg" label="Export" options={options} />

const socialOptions = [
  {
    label: "Share on Twitter",
    icon: <Twitter />,
    onClick: () => shareOnTwitter(),
  },
  {
    label: "Share on Facebook",
    icon: <Facebook />,
    onClick: () => shareOnFacebook(),
  },
  {
    label: "Copy Link",
    icon: <Copy />,
    onClick: () => copyToClipboard(),
  },
];

const exportOptions = [
  {
    label: "Download PDF",
    icon: <FileText />,
    onClick: () => exportPDF(),
  },
  {
    label: "Download CSV",
    icon: <Download />,
    onClick: () => exportCSV(),
  },
  {
    label: "Print",
    icon: <Printer />,
    onClick: () => printDocument(),
  },
];

const adminOptions = [
  {
    label: "Edit User",
    icon: <Edit />,
    onClick: () => editUser(),
  },
  {
    label: "Delete User",
    icon: <Trash />,
    onClick: () => deleteUser(),
  },
  {
    label: "Reset Password",
    icon: <Key />,
    onClick: () => resetPassword(),
  },
];