Animated Text Demo

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