feat: added qrcode to website

client/pages/JumbotronPage.tsx

@@ -10,6 +10,8 @@ import { Solution } from '../components/Solution'
 import { MetadataContext, useListResource, useResource, ServerContext, DatabaseContext, useServerAsyncCallback } from '../hooks'
 import { useLoggedInUser } from '../hooks/useCurrentUser'
 
+import QRCode from 'react-qr-code'
+
 export const JumbotronPage = ({}) => {
     const metadata = useContext(MetadataContext)
     const db = useContext(DatabaseContext)
@@ -35,13 +37,23 @@ export const JumbotronPage = ({}) => {
 
     const [solutions] = useListResource<SolutionModel>(`/api/solutions?problem=${problem.id}`)
 
+    const qrCodeUrl = location.host + prependBaseUrl(`/problem/${problem.id}`)
+
     return (
         <>
             <main class="page-jumbotron">
                 <div class="subtitle">
                     <a href="/">PHC Problemi</a>
                 </div>
-                <>{problem && <Problem {...problem} />}</>
+                <div class="row">
+                    <div class="qr-code">
+                        <span style={{ display: 'none' }}>{qrCodeUrl}</span>
+                        <QRCode bgColor="#0000" fgColor="#111" value={qrCodeUrl} />
+                    </div>
+                    <div class="box">
+                        <Problem {...problem} />
+                    </div>
+                </div>
                 <div class="centered">
                     Per ora ci sono {solutions.length} soluzion{'ie'[solutions.length === 1 ? 1 : 0]}
                 </div>

client/styles/main.scss

@@ -474,6 +474,28 @@ main.page-jumbotron {
     justify-content: center;
 
     zoom: 1.5;
+
+    .row {
+        display: grid;
+        gap: 2rem;
+
+        grid-template-columns: auto minmax(25rem, 1fr);
+
+        place-content: center;
+
+        .qr-code {
+            width: 10rem;
+
+            svg {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .box {
+            flex-grow: 1;
+        }
+    }
 }
 
 //

package.json

@@ -29,6 +29,7 @@
         "preact": "^10.11.2",
         "preact-render-to-string": "^5.2.6",
         "preact-router": "^4.1.0",
+        "react-qr-code": "^2.0.12",
         "rehype-katex": "^6.0.2",
         "rehype-stringify": "^9.0.3",
         "remark-math": "^5.1.1",