Add social share and QR code

Add social share buttons and a QR code to interactive pages, excluding green screen pages.

src/components/SocialShare.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Share2, Copy, QrCode, Twitter, Facebook, Linkedin } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import QRCode from 'qrcode';
+
+interface SocialShareProps {
+  title: string;
+  description: string;
+  url?: string;
+}
+
+const SocialShare: React.FC<SocialShareProps> = ({ 
+  title, 
+  description, 
+  url = window.location.href 
+}) => {
+  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string>('');
+  const [isOpen, setIsOpen] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (isOpen) {
+      QRCode.toDataURL(url, {
+        width: 200,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#FFFFFF'
+        }
+      }).then(setQrCodeDataUrl);
+    }
+  }, [url, isOpen]);
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast({
+        title: "Copied!",
+        description: "Link copied to clipboard",
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to copy to clipboard",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const copyQRCode = async () => {
+    try {
+      const response = await fetch(qrCodeDataUrl);
+      const blob = await response.blob();
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/png': blob })
+      ]);
+      toast({
+        title: "QR Code Copied!",
+        description: "QR code image copied to clipboard",
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to copy QR code",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const shareLinks = {
+    twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
+  };
+
+  return (
+    <div className="border-t border-border pt-6 mt-8">
+      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div className="text-center sm:text-left">
+          <h3 className="text-lg font-semibold text-foreground">Share this interactive</h3>
+          <p className="text-sm text-muted-foreground">Help others discover this learning experience</p>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {/* Social sharing buttons */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.open(shareLinks.twitter, '_blank')}
+            className="flex items-center gap-2"
+          >
+            <Twitter className="w-4 h-4" />
+            <span className="hidden sm:inline">Twitter</span>
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.open(shareLinks.facebook, '_blank')}
+            className="flex items-center gap-2"
+          >
+            <Facebook className="w-4 h-4" />
+            <span className="hidden sm:inline">Facebook</span>
+          </Button>
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.open(shareLinks.linkedin, '_blank')}
+            className="flex items-center gap-2"
+          >
+            <Linkedin className="w-4 h-4" />
+            <span className="hidden sm:inline">LinkedIn</span>
+          </Button>
+          
+          {/* Copy link button */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => copyToClipboard(url)}
+            className="flex items-center gap-2"
+          >
+            <Copy className="w-4 h-4" />
+            <span className="hidden sm:inline">Copy Link</span>
+          </Button>
+          
+          {/* QR Code dialog */}
+          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="sm" className="flex items-center gap-2">
+                <QrCode className="w-4 h-4" />
+                <span className="hidden sm:inline">QR Code</span>
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-md">
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
+                  <QrCode className="w-5 h-5" />
+                  QR Code
+                </DialogTitle>
+              </DialogHeader>
+              <div className="flex flex-col items-center space-y-4">
+                {qrCodeDataUrl && (
+                  <Card className="p-4 bg-white">
+                    <CardContent className="p-0">
+                      <img 
+                        src={qrCodeDataUrl} 
+                        alt="QR Code for this interactive" 
+                        className="w-48 h-48"
+                      />
+                    </CardContent>
+                  </Card>
+                )}
+                <div className="text-center space-y-2">
+                  <p className="text-sm text-muted-foreground">Scan to open this interactive</p>
+                  <Button onClick={copyQRCode} variant="outline" size="sm">
+                    <Copy className="w-4 h-4 mr-2" />
+                    Copy QR Code
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SocialShare;