Function ShareGame

apps/frontend/src/components/ShareGame.tsx:4–35

({className,gameId}:{className?:string,gameId:string})

import { Button } from "./Button";

export const ShareGame = ({className,gameId}:{className?:string,gameId:string}) => {

    const url = window.origin+"/game/"+gameId;
    const [copied,setCopied] = useState(false);

    const handleCopy = ()=>{
        window.navigator.clipboard.writeText(url);
        setCopied((p)=>true);
    }

    return (
        <div className={`flex flex-col items-center gap-y-4 ${className}`}>

            <h3 className="scroll-m-20 text-4xl font-semibold tracking-tight text-green-500">
                Play with Friends
            </h3>

            <div className="flex items-center gap-x-2">

                <LinkSvg/>

                <div onClick={handleCopy} className="text-blue-500 cursor-pointer">
                    {url}
                </div>
            </div>
            
            <Button onClick={handleCopy}>
                {copied ? `Copied to Clipboard !!` : `Copy the link`}
            </Button>
        </div>
    )
}

const LinkSvg = () => {
    return (