Updated General meetings (#86)

.gitignore

@@ -25,6 +25,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
+.yarn
 
 # local env files
 .env*.local

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

components/Room.tsx

@@ -1,26 +1,49 @@
-import Image from "next/image";
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { useMediaQuery } from '@react-hook/media-query';
 
-export default function Room() {
-    return (
-        // <iframe
-        //     title="OUG141"
-        //     id="home-vr"
-        //     allowFullScreen
-        //     width='100%'
-        //     height='100%'
-        //     src="https://www.washington.edu/classroom/vrview/index.html?image=https://features.classrooms.uw.edu/room-images/panoramas/MEB_238_panorama.jpg&"
-        // />
+const Room = () => {
+  const [isClient, setIsClient] = useState(false);
+  const isLargeScreen = useMediaQuery('(min-width: 1000px)');
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null; 
+  }
+
+  return (
+    <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between' }}>
+      {isLargeScreen && (
+        <div style={{ flex: 1, marginRight: '10px' }}>
+          <iframe
+            title="OUG141"
+            id="home-vr"
+            allowFullScreen
+            width="100%"
+            height="100%"
+            src="https://www.washington.edu/classroom/vrview/index.html?image=https://features.classrooms.uw.edu/room-images/panoramas/MOR_220_panorama.jpg&"
+          />
+        </div>
+      )}
+      <div style={{ flex: 1, marginLeft: '10px' }}>
         <Image
-            src="/GatesCenter.webp"
-            alt="UW CSE2 (Gates Center) Building"
-            width={2000}
-            height={1000}
-            style={{
-                width: "100%",
-                height: "100%",
-                borderRadius: "15px",
-                objectFit: "cover",
-            }}
+          src="/more_hall.webp"
+          alt="UW CSE2 (Gates Center) Building"
+          width={500}
+          height={300}
+          style={{
+            width: '100%',
+            height: '100%',
+            borderRadius: '15px',
+            objectFit: 'scale-down',
+          }}
         />
-    );
-}
+      </div>
+    </div>
+  );
+};
+
+export default Room;

package.json

@@ -22,6 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@next/font": "14.1.0",
+    "@react-hook/media-query": "^1.1.1",
     "@types/axios": "^0.14.0",
     "@types/node": "20.11.8",
     "@types/react": "18.2.48",

pages/index.tsx

@@ -318,10 +318,15 @@ function MeetingInfo() {
                 color="brand.light_brown"
                 align="center"
             >
-                Join us every Tuesday from 6:00pm to 7:30pm PST at CSE2 G04!
-            </Text>
-            <Box width="70%" height="370px">
+                Join us every Tuesday from 6:00pm to 7:30pm PST at MOR Hall 220!
+            </Text> 
+            <Box width="60%" height="370px" style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            }}>
                 <Room />
+
             </Box>
             {isLargerThan1000 ? (
                 <Text
@@ -331,7 +336,7 @@ function MeetingInfo() {
                     color="brand.light_brown"
                     align="center"
                 >
-                    Gates Center Room G04 @ University of Washington
+                    More Hall 220 @ University of Washington
                 </Text>
             ) : (
                 <Spacer paddingBottom="20px" />