Fonts werden teilweise geladen

components/FancyTextPreview.jsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { fontTransforms, transformText } from "@/components/fontTransforms";
+
+export default function FancyTextPreview() {
+  const [inputText, setInputText] = useState("Hello Instagram");
+  const [copiedIndex, setCopiedIndex] = useState(null);
+
+  const allFonts = Object.keys(fontTransforms);
+
+  const handleCopy = async (text, index) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedIndex(index);
+      setTimeout(() => setCopiedIndex(null), 1500);
+    } catch (err) {
+      console.error("Copy failed:", err);
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto p-4">
+      <input
+        type="text"
+        className="w-full border rounded px-4 py-2 mb-6 text-lg"
+        value={inputText}
+        onChange={(e) => setInputText(e.target.value)}
+        placeholder="Type something..."
+      />
+
+      <div className="space-y-6">
+        {allFonts.map((fontName, index) => {
+          const { transformed, fontClassName } = transformText(inputText, fontName);
+
+          return (
+            <div
+              key={fontName}
+              className="border-b pb-4 flex flex-col gap-2"
+            >
+              <p className="text-sm font-semibold text-gray-700">{fontName}</p>
+              <div className="flex flex-col gap-1">
+                {/* ⬇️ Normale Textvorschau mit Webfont */}
+                <p className={`text-xl ${fontClassName}`}>
+                  {inputText || "Hello Instagram"}
+                </p>
+
+                {/* ⬇️ Fancy Unicode-Text */}
+                <p className="text-xl text-gray-600">
+                  {transformed}
+                </p>
+              </div>
+
+              <button
+                className="self-start mt-1 text-sm bg-gray-200 hover:bg-gray-300 rounded px-3 py-1"
+                onClick={() => handleCopy(transformed, index)}
+              >
+                {copiedIndex === index ? "Copied!" : "Copy"}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}