Fonts werden teilweise geladen

components/ui/FontCard.jsx

@@ -5,8 +5,6 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Copy, Check, Heart, Share2, Info } from "lucide-react";
 import { transformText, fontTransforms } from "../fontTransforms";
-import { getFontData } from "@/lib/fonts";
-import fontMap from "@/lib/tailwind-font-map";
 
 export default function FontCard({
   fontName,
@@ -19,71 +17,24 @@ export default function FontCard({
   const [liked, setLiked] = useState(false);
 
   const fontInfo = fontTransforms[fontName];
-  const fontData = getFontData(fontName);
-  const fontKey = fontName.toLowerCase().replace(/\s+/g, "");
-  const fontVarName = fontMap[fontKey];
-  const fontVar = fontVarName ? { fontFamily: `var(${fontVarName})` } : {};
-  const fontClass = fontData?.className || "";
 
+  // Dynamisch Font-Klasse aus Fontnamen generieren (z. B. "Open Sans" → "font-open-sans")
+  const fontClass = `font-${fontName.toLowerCase().replace(/\s+/g, "-")}`;
+
+  // Fancy-Transformation
   const rawText = "Hallo Instagram!";
-  const transformed = transformText(rawText, fontName);
-  const finalText = transformed?.transformed || rawText;
-  const copyText = transformed?.transformed || rawText;
+  const { transformed } = transformText(rawText, fontName);
+  const finalText = transformed || rawText;
 
   const handleCopy = () => {
-    if (navigator.clipboard && window.isSecureContext) {
-      navigator.clipboard
-        .writeText(copyText)
-        .then(() => flashCopied())
-        .catch(() => fallbackCopy());
-    } else {
-      fallbackCopy();
-    }
+    navigator.clipboard.writeText(finalText).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
   };
 
-  const flashCopied = () => {
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const fallbackCopy = () => {
-    const textarea = document.createElement("textarea");
-    textarea.value = copyText;
-    textarea.setAttribute("readonly", "");
-    textarea.style.position = "fixed";
-    textarea.style.top = "0";
-    textarea.style.left = "0";
-    textarea.style.width = "1px";
-    textarea.style.height = "1px";
-    textarea.style.padding = "0";
-    textarea.style.border = "none";
-    textarea.style.outline = "none";
-    textarea.style.boxShadow = "none";
-    textarea.style.background = "transparent";
-
-    document.body.appendChild(textarea);
-    textarea.focus();
-    textarea.select();
-    try {
-      document.execCommand("copy");
-      flashCopied();
-    } catch (err) {
-      console.error("Fallback Copy fehlgeschlagen:", err);
-    }
-    document.body.removeChild(textarea);
-  };
-
-  const handleShare = async () => {
-    if (!navigator.share) return;
-    try {
-      await navigator.share({
-        title: `FancyText – ${fontName}`,
-        text: copyText,
-        url: window.location.href,
-      });
-    } catch (err) {
-      console.error("Share fehlgeschlagen:", err);
-    }
+  const handleShare = () => {
+    alert(`Teilen von: ${fontName}`);
   };
 
   return (
@@ -117,7 +68,7 @@ export default function FontCard({
                 variant="ghost"
                 size="sm"
                 onClick={handleShare}
-                className="text-gray-400 hover:text-blue-500"
+                className="text-gray-400 hover:text-blue-500 pointer-events-auto"
               >
                 <Share2 className="w-4 h-4" />
               </Button>
@@ -135,8 +86,8 @@ export default function FontCard({
             type="text"
             value={finalText}
             readOnly
-            className={`${fontClass} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0`}
-            style={{ ...fontVar, lineHeight: "1.2" }}
+            className={`${fontClass} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0 pointer-events-auto`}
+            style={{ lineHeight: "1.2" }}
           />
 
           <Button