npx create-react-app cartas-app

[luancristian777]

import React, { useState, useEffect } from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import QRCode from "react-qr-code"; import { useSearchParams } from "react-router-dom";

function CriarCarta() { const [message, setMessage] = useState(""); const [image, setImage] = useState(null); const [musicLink, setMusicLink] = useState(""); const [qrValue, setQrValue] = useState(null);

const handleImageUpload = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setImage(reader.result); }; reader.readAsDataURL(file); } };

const handleGenerate = () => { const payload = { message, image, musicLink, }; const jsonString = encodeURIComponent(JSON.stringify(payload)); const link = ${window.location.origin}/carta?data=${jsonString}; setQrValue(link); };

return (

Criar Carta Virtual

<textarea className="w-full p-2 border rounded" rows="5" placeholder="Escreva sua mensagem..." value={message} onChange={(e) => setMessage(e.target.value)} /> setMusicLink(e.target.value)} /> Gerar QR Code {qrValue && (

{qrValue}

)}

); } function VisualizarCarta() { const [searchParams] = useSearchParams(); const [data, setData] = useState(null); useEffect(() => { const encoded = searchParams.get("data"); if (encoded) { const decoded = JSON.parse(decodeURIComponent(encoded)); setData(decoded); } }, [searchParams]); if (!data) return

Carregando carta...

; return (

🎉 Sua Carta Especial 🎉

{data.message}

{data.image && ( )} {data.musicLink && (

🎵 Ouvir música

)}

); } export default function CartasAppRouter() { const path = window.location.pathname; return path.includes("/carta") ? : ; }