Merge pull request #120 from tsg-iitkgp/certificatepreview

Certificatepreview

src/App.js

@@ -38,6 +38,7 @@ import ViewLog from "./pages/newadmin/certifgen2/ViewLog";
 import CertifPreview from "./pages/CertifPreview";
 import LiveScoreboard from "./pages/LiveScoreboard/LiveScoreboard";
 import Results from "./pages/Results/Results";
+import CertifPreview from "./pages/certificatePreview/CertifPreview";
 
 function App() {
   useEffect(() => {
@@ -72,6 +73,7 @@ function App() {
           <Route exact path="/committees/welfare" component={Welfare} />
           <Route exact path="/committees/socult" component={Socult} />
           <Route exact path="/societies" component={Societies} />
+          <Route exact path="/certifgen/view/:certifid" component={CertifPreview} />
           {/* Events Route */}
           <Route exact path="/events" component={Events} />
           {/* Results Routes */}
@@ -102,7 +104,9 @@ function App() {
             component={ElectionCandidates}
           />
 
+          <Route exact path="/certifpreview/1" component={CertifPreview} />
           {/* Other Routes */}
+
           {/*<Route exact path="/gallery" component={Gallery} /> */}
         </Switch>
       </ScrollToTop>

src/components/Popper.js

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import { useWindowSize } from 'react-use';
+import Confetti from 'react-confetti';
+
+const ConfettiComponent = () => {
+  const [isConfettiActive, setConfettiActive] = useState(true);
+  const { width, height } = useWindowSize();
+
+// Use a timeout or any condition to control when to stop the confetti
+  useEffect(() => {
+    const confettiTimeout = setTimeout(() => {
+      setConfettiActive(false);
+    }, 2500); 
+
+    // Clean up the timeout to avoid memory leaks
+    return () => clearTimeout(confettiTimeout);
+  }, []); // The empty dependency array ensures that this effect runs only once
+
+  return (
+    <>
+
+      {isConfettiActive && (
+        <Confetti width={width} height={height} />
+      )}
+    </>
+  );
+};
+
+export default ConfettiComponent;

src/pages/certificatePreview/CertifPreview.css

@@ -0,0 +1,81 @@
+@media only screen and (min-width:725px){
+    .certificateimage img{
+        width: 45vw;
+        height: 45vh;
+    }
+
+    .certifpreview_nav h1{
+        font-size: 2.25rem;
+    }
+
+    .downloadBtn{
+        font-size: 1rem;
+        width: 12rem;
+    }
+}
+
+@media only screen and (max-width:724px){
+    .certificateimage img{
+        width: 80vw;
+        height: 40vh;
+    }
+
+    .certifpreview_nav h1{
+        font-size: 1.6rem;
+    }
+
+    .downloadBtn{
+        font-size: 1.25rem;
+        width: 15rem;
+    }
+}
+
+.downloadBtn{
+    background-color: #F1C40F;
+    color: white;
+    padding: 0.25vw;
+    transition: all 0.5s;
+    border: none;
+    border-radius: 5px;
+}
+
+.downloadBtn:hover{
+    background-color: white;
+    color: #F1C40F;
+}
+
+.gymk_logo,.kgp_logo{
+    width: 4.5rem;
+    margin: 0 0.6rem;
+}
+
+.certifpreview_body hr{
+    color: #F1C40F;
+    width: 80vw;
+    margin: 0.5rem auto;
+    border: 0.2rem solid #F1C40F;
+}
+
+.certifpreview_share{
+    width: 40vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;    
+}
+
+.certifshare_text{
+    color: white;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.certifshare_link i{
+    color: black;
+    background-color: #F1C40F;
+    border-radius: 50%;
+    width: 2rem;
+    margin: 0 0.5rem;
+    padding: 0.5rem;
+    font-size: 1.25rem;
+}
+