75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Facebook, Instagram, Twitter, Link as LinkIcon, Check } from 'lucide-react';
|
|
import toast from 'react-hot-toast';
|
|
|
|
interface Props {
|
|
title: string;
|
|
layout?: 'vertical' | 'horizontal';
|
|
}
|
|
|
|
export default function BlogShareButtons({ title, layout = 'vertical' }: Props) {
|
|
const [copied, setCopied] = useState(false);
|
|
const [url, setUrl] = useState('');
|
|
|
|
useEffect(() => {
|
|
setUrl(window.location.href);
|
|
}, []);
|
|
|
|
const handleCopy = (customMessage?: string) => {
|
|
if (!url) return;
|
|
navigator.clipboard.writeText(url);
|
|
setCopied(true);
|
|
toast.success(customMessage || 'Lien copié dans le presse-papiers !');
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
const shareLinks = {
|
|
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
|
|
twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
|
|
};
|
|
|
|
if (!url) return null;
|
|
|
|
return (
|
|
<div className={`flex ${layout === 'horizontal' ? 'flex-row gap-4 justify-center flex-wrap' : 'flex-col gap-3'} z-50`}>
|
|
<a
|
|
href={shareLinks.facebook}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
|
|
title="Partager sur Facebook"
|
|
>
|
|
<Facebook className="w-5 h-5" />
|
|
</a>
|
|
|
|
<a
|
|
href={shareLinks.twitter}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="w-10 h-10 rounded-full bg-white text-black shadow-xl flex items-center justify-center hover:scale-110 transition-transform border border-gray-100"
|
|
title="Partager sur X (Twitter)"
|
|
>
|
|
<Twitter className="w-5 h-5" />
|
|
</a>
|
|
|
|
<button
|
|
onClick={() => handleCopy('Lien copié ! Vous pouvez le coller sur Instagram.')}
|
|
className="w-10 h-10 rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7] text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
|
|
title="Copier le lien pour Instagram"
|
|
>
|
|
<Instagram className="w-5 h-5" />
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleCopy()}
|
|
className="w-10 h-10 rounded-full bg-gray-800 text-white shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
|
|
title="Copier le lien"
|
|
>
|
|
{copied ? <Check className="w-5 h-5 text-green-400" /> : <LinkIcon className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|