45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
import React from "react";
|
||
import { motion } from "framer-motion";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Share2 } from "lucide-react";
|
||
|
||
export default function SocialButtons() {
|
||
const handleShare = async () => {
|
||
const shareData = {
|
||
title: "FancyText - Teile die App! 🔥",
|
||
text: "Check out FancyText – coole Fonts für Instagram, TikTok & Co.!",
|
||
url: window.location.href,
|
||
};
|
||
if (navigator.share) {
|
||
try {
|
||
await navigator.share(shareData);
|
||
} catch (err) {
|
||
if (err.name !== "AbortError") console.error("Share failed:", err);
|
||
}
|
||
} else {
|
||
try {
|
||
await navigator.clipboard.writeText(`${shareData.text}\n${shareData.url}`);
|
||
alert("Link kopiert! 📋");
|
||
} catch (err) {
|
||
console.error("Copy failed:", err);
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.5 }}
|
||
className="mb-8 sm:mb-12 text-center"
|
||
>
|
||
<Button
|
||
onClick={handleShare}
|
||
className="inline-flex items-center bg-gradient-to-br from-blue-500 to-indigo-500 text-white px-6 py-3 rounded-xl shadow-lg hover:opacity-90 transition"
|
||
>
|
||
<Share2 className="w-5 h-5 mr-2" /> Share
|
||
</Button>
|
||
</motion.section>
|
||
);
|
||
}
|