115 lines
3.8 KiB
JavaScript
115 lines
3.8 KiB
JavaScript
// components/ui/FontCard.jsx
|
||
import React, { useState } from "react";
|
||
import { Card } from "@/components/ui/card";
|
||
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";
|
||
|
||
export default function FontCard({
|
||
fontName,
|
||
transformedText,
|
||
category,
|
||
isPopular,
|
||
index = 0,
|
||
}) {
|
||
const [copied, setCopied] = useState(false);
|
||
const [liked, setLiked] = useState(false);
|
||
|
||
const fontInfo = fontTransforms[fontName];
|
||
|
||
// 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 || rawText;
|
||
|
||
const handleCopy = () => {
|
||
navigator.clipboard.writeText(finalText).then(() => {
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 1500);
|
||
});
|
||
};
|
||
|
||
const handleShare = () => {
|
||
alert(`Teilen von: ${fontName}`);
|
||
};
|
||
|
||
return (
|
||
<div style={{ pointerEvents: "none" }}>
|
||
<Card className="bg-white/90 backdrop-blur-sm border-0 shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden">
|
||
<div className="p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="font-semibold text-gray-800 capitalize">{fontName}</h3>
|
||
{isPopular && (
|
||
<Badge className="bg-gradient-to-r from-pink-500 to-purple-500 text-white text-[10px] uppercase tracking-wide">
|
||
Beliebt
|
||
</Badge>
|
||
)}
|
||
{category && (
|
||
<Badge className="bg-gray-200 text-gray-600 text-[10px] uppercase tracking-wide">
|
||
{category}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setLiked(!liked)}
|
||
className={liked ? "text-pink-500" : "text-gray-400"}
|
||
>
|
||
<Heart className={`w-4 h-4 ${liked ? "fill-current" : ""}`} />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={handleShare}
|
||
className="text-gray-400 hover:text-blue-500 pointer-events-auto"
|
||
>
|
||
<Share2 className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{fontInfo?.description && (
|
||
<p className="text-xs text-gray-500 mb-3 flex items-center gap-1">
|
||
<Info className="w-3 h-3" />
|
||
{fontInfo.description}
|
||
</p>
|
||
)}
|
||
|
||
<input
|
||
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 pointer-events-auto`}
|
||
style={{ lineHeight: "1.2" }}
|
||
/>
|
||
|
||
<Button
|
||
onClick={handleCopy}
|
||
className="w-full bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white font-medium py-3 rounded-xl shadow-lg pointer-events-auto"
|
||
disabled={copied}
|
||
>
|
||
{copied ? (
|
||
<>
|
||
<Check className="w-4 h-4 mr-2" />
|
||
Copy!
|
||
</>
|
||
) : (
|
||
<>
|
||
<Copy className="w-4 h-4 mr-2" />
|
||
Copy now
|
||
</>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|