Add social share and QR code

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

package.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
     "@tanstack/react-query": "^5.56.2",
+    "@types/qrcode": "^1.5.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -48,6 +49,7 @@
     "input-otp": "^1.2.4",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
+    "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",

src/components/BinaryNumberGame.tsx

@@ -2,10 +2,15 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import SocialShare from '@/components/SocialShare';
 
 const POWERS_OF_TWO = [128, 64, 32, 16, 8, 4, 2, 1];
 
-const BinaryNumberGame = () => {
+interface BinaryNumberGameProps {
+  showSocialShare?: boolean;
+}
+
+const BinaryNumberGame: React.FC<BinaryNumberGameProps> = ({ showSocialShare = true }) => {
   const [targetNumber, setTargetNumber] = useState<number>(0);
   const [flippedCards, setFlippedCards] = useState<boolean[]>(new Array(8).fill(false));
   const [currentSum, setCurrentSum] = useState<number>(0);
@@ -165,6 +170,14 @@ const BinaryNumberGame = () => {
           {!hasGameStarted ? 'Start Game' : isGameWon ? 'Play Again' : 'New Game'}
         </Button>
       </div>
+
+      {showSocialShare && (
+        <SocialShare
+          title="Binary Number Representation Game"
+          description="Learn how numbers are represented in binary (base-2) format through an interactive guessing game."
+          url={`${window.location.origin}/binary-number-game`}
+        />
+      )}
     </div>
   );
 };

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;

src/pages/BinaryNumberGameGreenScreen.tsx

@@ -11,7 +11,7 @@ const BinaryNumberGameGreenScreen = () => {
   return <GreenScreenWrapper mode={greenScreenMode}>
       <div className="space-y-6">
         
-        <BinaryNumberGame />
+        <BinaryNumberGame showSocialShare={false} />
       </div>
     </GreenScreenWrapper>;
 };