Add QR code component and page templates

Author: youssef.ibrahim3

shatter-web/package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
+    "qrcode.react": "^4.2.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwindcss": "^4.1.16"

shatter-web/package.json

@@ -1,13 +1,13 @@
 import { useState } from "react";
-
 import TestComponent from "./components/TestComponent.tsx";
-
+import QRCodeDisplay from "./components/QRCodeDisplay.tsx";
 function App() {
   return (
     <>
       <div className="bg-red-500">
         <p>This is the first component</p>
         <TestComponent />
+        <QRCodeDisplay />
       </div>
     </>
   );

shatter-web/src/App.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { QRCodeSVG } from 'qrcode.react';
+
+function QRCodeDisplay() {
+  return (
+    <>
+      <div className="bg-amber-200">
+              <QRCodeSVG
+                  value={"ABCD1234"}
+                  title={"ABCD1234"}
+                  size={128}
+                  bgColor={"#ffffff"}
+                  fgColor={"#000000"}
+                  level={"L"}
+                  imageSettings={{
+                      src: "https://static.zpao.com/favicon.png",
+                      x: undefined,
+                      y: undefined,
+                      height: 24,
+                      width: 24,
+                      opacity: 1,
+                      excavate: true,
+                  }}
+              />
+      </div>
+    </>
+  );
+}
+
+export default QRCodeDisplay;

shatter-web/src/components/QRCodeDisplay.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from '../App.tsx'
+
+//this is just copypasted from main, changes will be made 
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

shatter-web/src/pages/create-event.tsx

@@ -0,0 +1,16 @@
+import { useState } from "react";
+
+import TestComponent from "../components/TestComponent.tsx";
+
+function Dashboard() {
+    return (
+        <>
+            <div className="bg-blue-100">
+                <p>Event Dashboard Coming Soon.</p>
+                <TestComponent />
+            </div>
+        </>
+    );
+}
+
+export default Dashboard;