65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
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>
|
|
);
|
|
}
|