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>