feat: add floating social share buttons and restore text justification

2026-05-10 14:30:38 +02:00
parent fe7acfa927
commit 15700036e5
5 changed files with 174 additions and 39 deletions
--- a/components/BlogShareButtons.tsx
+++ b/components/BlogShareButtons.tsx
@@ -0,0 +1,73 @@
+"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;
+}
+
+export default function BlogShareButtons({ title }: 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="fixed bottom-4 right-4 lg:top-1/2 lg:right-8 lg:-translate-y-1/2 lg:bottom-auto flex flex-col gap-3 z-50">
+      <a 
+        href={shareLinks.facebook}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="w-12 h-12 lg:w-10 lg:h-10 rounded-full bg-white text-[#1877F2] shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
+        title="Partager sur Facebook"
+      >
+        <Facebook className="w-6 h-6 lg:w-5 lg:h-5" />
+      </a>
+      
+      <a 
+        href={shareLinks.twitter}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="w-12 h-12 lg:w-10 lg: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-6 h-6 lg:w-5 lg:h-5" />
+      </a>
+      
+      <button 
+        onClick={() => handleCopy('Lien copié ! Vous pouvez le coller sur Instagram.')}
+        className="w-12 h-12 lg:w-10 lg: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-6 h-6 lg:w-5 lg:h-5" />
+      </button>
+
+      <button 
+        onClick={() => handleCopy()}
+        className="w-12 h-12 lg:w-10 lg: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-6 h-6 lg:w-5 lg:h-5 text-green-400" /> : <LinkIcon className="w-6 h-6 lg:w-5 lg:h-5" />}
+      </button>
+    </div>
+  );
+}