Glitch Button Demo

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