Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from fga-eps-mds/US3-Validar-status-do-sindical…
…izado-por-QR-Code US3 validar status do sindicalizado por qr code
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| import React, { useRef, useState, useEffect } from "react"; | ||
|
Check failure on line 1 in src/Pages/Protected/Carteirinha/index.jsx
|
||
| import QRCode from "react-qr-code"; | ||
| import "./index.css"; | ||
|
|
||
| import { jsPDF } from "jspdf"; | ||
|
|
@@ -7,14 +8,16 @@ import html2canvas from "html2canvas"; | |
| import badgeLogo from "../../../assets/sindpol-logo.png"; | ||
| import penalLogo from "../../../assets/penal_df-min.png.png"; | ||
| import qrCode from "../../../assets/qr-code.png"; | ||
| import { FaFacebook, FaInstagram, FaYoutube } from "react-icons/fa"; | ||
| import { FaXTwitter } from "react-icons/fa6"; | ||
|
|
||
|
|
||
| const Carteirinha = () => { | ||
| const cardRef = useRef(null); | ||
| const [membershipData, setMembershipData] = useState(null); | ||
|
Check failure on line 17 in src/Pages/Protected/Carteirinha/index.jsx
|
||
|
|
||
| // Fetch Membership data | ||
| /* useEffect(() => { | ||
| const fetchMembership = async () => { | ||
| try { | ||
| const response = await fetch("http://localhost:3001/membership"); | ||
|
|
@@ -28,6 +31,7 @@ const Carteirinha = () => { | |
| fetchMembership(); | ||
| }, []); | ||
| */ | ||
|
|
||
| const downloadPDF = async () => { | ||
| const element = cardRef.current; | ||
|
|
@@ -64,6 +68,8 @@ const Carteirinha = () => { | |
| button.style.display = ""; // Mostra o botão novamente | ||
| }; | ||
|
|
||
| /* | ||
| // Render loading state | ||
| if (!membershipData) { | ||
| return <div>Carregando dados...</div>; | ||
|
|
@@ -77,6 +83,17 @@ const Carteirinha = () => { | |
| hiringDate | ||
| } = membershipData; | ||
| */ | ||
|
|
||
|
|
||
| const list = { | ||
| titular: "Dannyeclisson", | ||
| dataDeNascimento: "24/11/2001", | ||
| dataExpedicao: "21/06/2019", | ||
| CPF: "074.885.581-54", | ||
| validade: "30/11/2024", | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="carteirinha-container" ref={cardRef}> | ||
| <div className="carteirinha"> | ||
|
|
@@ -90,28 +107,33 @@ const Carteirinha = () => { | |
| <div className="carteirinha-info"> | ||
| <div className="info-line"> | ||
| <div className="info-block"> | ||
| <strong>TITULAR:</strong><br/> | ||
| <p className="info-color-titular"><span>{list.titular}</span></p> | ||
| {/*<p className="info-color-titular"><span>{name}</span></p>*/} | ||
| </div> | ||
| </div> | ||
| <div className="info-line"> | ||
| <div className="info-block"> | ||
| <strong>DATA DE NASCIMENTO:</strong><br/> | ||
| <p className="info-color"><span>{list.dataDeNascimento}</span></p> | ||
| {/*<p className="info-color"><span>{new Date(birthDate).toLocaleDateString()}</span></p>*/} | ||
| </div> | ||
| <div className="info-block"> | ||
| <strong>DATA DE EXPEDIÇÃO:</strong><br/> | ||
| <p className="info-color"><span>{list.dataExpedicao}</span></p> | ||
| {/*<p className="info-color"><span>{new Date(expeditionDate).toLocaleDateString()}</span></p>*/} | ||
| </div> | ||
| </div> | ||
| <div className="info-line"> | ||
| <div className="info-block"> | ||
| <strong>CPF:</strong><br/> | ||
| <p className="info-color"><span>{list.CPF}</span></p> | ||
| {/*<p className="info-color"><span>{cpf}</span></p>*/} | ||
| </div> | ||
| <div className="info-block"> | ||
| <strong>CONTRATAÇÃO:</strong><br/> | ||
| <p className="info-color"><span>{list.validade}</span></p> | ||
| {/*<p className="info-color"><span>{new Date(hiringDate).toLocaleDateString()}</span></p>*/} | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -133,17 +155,19 @@ const Carteirinha = () => { | |
| </p> | ||
| </footer> | ||
| <div className="qr-section"> | ||
| <div className="qr-code"> | ||
| <QRCode value="http://localhost:5173/verificar-membro" size={170} /> {/* endereço que será passado no qrCode */} | ||
| </div> | ||
| <p className="qr-code-numero">(61) 3321-1949</p> | ||
| </div> | ||
|
|
||
| <footer className="carteirinha-footer"> | ||
| <p>sindpol.org.br / [email protected]</p> | ||
| <div className="social-media"> | ||
| <FaInstagram className="social-icon" /> | ||
| <FaYoutube className="social-icon" /> | ||
| <FaFacebook className="social-icon" /> | ||
| <FaXTwitter className="social-icon" /> | ||
| </div> | ||
| <span>@sindpoldf</span> | ||
| <div className="footer-logos"> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| .block-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| padding: 20px; | ||
| background-color: #fff; | ||
| min-height: 100vh; | ||
| gap: 15px; | ||
| } | ||
|
|
||
| .block { | ||
| background: #eae3d7; | ||
| height: 420px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
| width: 650px; | ||
| padding: 20px 30px; | ||
| text-align: center; | ||
| font-family: Arial, sans-serif, 'Noto Sans'; | ||
| margin-top: 200px; | ||
|
|
||
| } | ||
|
|
||
| .block-header { | ||
| color: #341F14; | ||
| font-size: 15px; | ||
| margin-top: 3px; | ||
| margin-bottom: 20px; | ||
| margin-left: -10px; | ||
| font-weight: bold !important; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .block h1 { | ||
| font-family: 'Noto Sans'; | ||
| font-weight: 900; | ||
| letter-spacing: -2.5px; | ||
| line-height: 123.5%; | ||
| font-size: 70px; | ||
| color: #AE883C !important; | ||
| margin: -12px; | ||
| margin-top: 10px; | ||
| text-shadow: 0px 100px 80px rgba(226, 183, 61, 0.25); | ||
| } | ||
|
|
||
| .block-header p { | ||
| color: #341F14; | ||
| font-size: 15px; | ||
| margin-top: 3px; | ||
| margin-left: -10px; | ||
| font-weight: 800 !important; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .inf-line { | ||
| display: flex; | ||
| gap: 25px; | ||
| margin-bottom: 10px; | ||
| margin-top: 5px; | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| .inf-block { | ||
| margin-left: 5px; | ||
| font-size: 13px; | ||
| margin-top: 20px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .inf-block strong { | ||
| font-weight: 900; | ||
| color: #341F14; | ||
| margin-left: -5px; | ||
| font-weight: 900 !important; | ||
| } | ||
|
|
||
| .inf-block span{ | ||
| font-size: 20px; | ||
| margin: 2px; | ||
| } | ||
|
|
||
| .inf-color{ | ||
| background-color: white; | ||
| border-radius: 6px; | ||
| padding: 5px 28px; | ||
| padding-left: 5px; | ||
| padding-top: 10px; | ||
| width: 185px; | ||
| height: 40px; | ||
| margin-top: 5px; | ||
| margin-left: -5px; | ||
| } | ||
|
|
||
| .inf-color-titular{ | ||
| background-color: white; | ||
| border-radius: 6px; | ||
| padding: 5px 28px; | ||
| padding-left: 5px; | ||
| padding-top: 10px; | ||
| width: 550px; | ||
| height: 40px; | ||
| margin-top: 5px; | ||
| margin-left: -5px; | ||
|
|
||
| } | ||
|
|
||
| .foot-logo { | ||
| width: 130px; | ||
| height: auto; | ||
| margin-top: -3px; | ||
| margin-left: -10px; | ||
| } | ||
|
|
||
| .Sindicalizado{ | ||
| font-family: 'Noto Sans' !important; | ||
| color: #AE883C !important; | ||
| font-size: 20px !important; | ||
| font-weight: 900 !important; | ||
| text-shadow: 0px 4px 4px rgba(226, 183, 61, 0.25); | ||
| margin-top: -5px; | ||
| } |
Oops, something went wrong.