Add social share and QR code
Add social share buttons and a QR code to interactive pages, excluding green screen pages.
This commit is contained in:
gpt-engineer-app[bot]
parent
04ecfc8d28
commit
b60c8481f7
5 changed files with 607 additions and 8 deletions
423
package-lock.json
generated
423
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
173
src/components/SocialShare.tsx
Normal file
173
src/components/SocialShare.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -11,7 +11,7 @@ const BinaryNumberGameGreenScreen = () => {
|
|||
return <GreenScreenWrapper mode={greenScreenMode}>
|
||||
<div className="space-y-6">
|
||||
|
||||
<BinaryNumberGame />
|
||||
<BinaryNumberGame showSocialShare={false} />
|
||||
</div>
|
||||
</GreenScreenWrapper>;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue