Liquid Metal Button Demo

1"use client";
2import React, { useState } from "react";
3import reactElementToJSXString from "react-element-to-jsx-string";
4import { toast, Toaster } from "sonner";
5import { LiquidMetalButton } from "@/registry/ui/liquid-metal-button";
6import {
7  Copy,
8  Crown,
9  Download,
10  Shield,
11  ShoppingCart,
12  Trophy,
13  Zap,
14  Check,
15} from "lucide-react";
16 
17interface ButtonsCard {
18  children: React.ReactNode;
19  onClick: () => void;
20  isCopied: boolean;
21}
22 
23type LiquidMetalButtonType = {
24  name: string;
25  description: string;
26  component: React.ReactNode;
27  code?: string;
28};
29 
30const ButtonsCard = ({ children, onClick, isCopied }: ButtonsCard) => {
31  return (
32    <div
33      className="border group relative border-gray-300 dark:border-zinc-800 hover:border-zinc-500 hover:dark:border-zinc-500 rounded-lg p-6 flex flex-col items-center justify-center h-52 cursor-pointer hover:shadow-lg transition-shadow duration-200"
34      onClick={onClick}
35    >
36      <div className="mb-4">{children}</div>
37      <div className="absolute top-2 right-2">
38        {isCopied ? (
39          <Check className="h-3 w-3 text-green-500 transition-all duration-200" />
40        ) : (
41          <Copy className="h-3 w-3 text-zinc-300 dark:text-zinc-700 group-hover:text-zinc-500 group-hover:dark:text-zinc-500" />
42        )}
43      </div>
44    </div>
45  );
46};
47 
48export function LiquidMetalButtons() {
49  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
50 
51  const copy = (button: LiquidMetalButtonType, index: number) => {
52    if (button.code) {
53      copyToClipboard(button.code, index);
54      return;
55    }
56    let buttonString = reactElementToJSXString(button.component, {
57      displayName: (element) => {
58        if (
59          typeof element === "object" &&
60          element !== null &&
61          "type" in element &&
62          // eslint-disable-next-line @typescript-eslint/no-explicit-any
63          (element as any).type?.name === "LiquidMetalButton"
64        ) {
65          return "LiquidMetalButton";
66        }
67        if (
68          typeof element === "object" &&
69          element !== null &&
70          "type" in element &&
71          // eslint-disable-next-line @typescript-eslint/no-explicit-any
72          (element as any).type?.displayName
73        ) {
74          // eslint-disable-next-line @typescript-eslint/no-explicit-any
75          return (element as any).type.displayName;
76        }
77        if (
78          typeof element === "object" &&
79          element !== null &&
80          "type" in element &&
81// … truncated