update content based on viewport size

apps/webring/src/App.tsx

@@ -3,27 +3,79 @@ import { useState } from "react";
 import Board from "./_components/board";
 import List from "./_components/list";
 import Nav from "./_components/nav";
+import { useIsMedium, useIsSmall } from "./_hooks/window";
 
 function App() {
   const [hoveredMember, setHoveredMember] = useState<string | null>(null);
+  const isSmall = useIsSmall();
+  const isMedium = useIsMedium();
 
   return (
     <div className="flex min-h-screen flex-col bg-black">
-      <Nav />
-      <div className="flex flex-grow flex-row">
-        <List
-          hoveredMember={hoveredMember}
-          onMemberHover={(name) => setHoveredMember(name)}
-          onMemberLeave={() => setHoveredMember(null)}
-        />
-        <div className="relative w-2/3">
-          <Board
-            hoveredMember={hoveredMember}
-            onMemberHover={(name) => setHoveredMember(name)}
-            onMemberLeave={() => setHoveredMember(null)}
-          />
+      {/* Mobile view */}
+      {isSmall && (
+        <div className="flex h-screen w-full flex-col items-center justify-center p-4">
+          <h1 className="mb-8 text-2xl font-bold text-white">The Collective</h1>
+          <div className="border border-[#757575] p-6 text-center text-xl font-bold text-white">
+            Please use this application on desktop for the best experience
+          </div>
+          <div className="mt-8 h-32 w-full">
+            <div className="diagonal-stripes flex items-center justify-center bg-black text-sm text-white">
+              <a
+                href="https://github.com/KnightHacks/forge/blob/main/apps/webring/README.md"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex justify-center"
+              >
+                <span className="flicker-text bg-black">
+                  Join The Collective -&gt;
+                </span>
+              </a>
+            </div>
+          </div>
         </div>
-      </div>
+      )}
+      {/* Medium view */}
+      {isMedium && (
+        <>
+          <Nav />
+          // make it vertically listed
+          <div className="flex flex-col">
+            <List
+              hoveredMember={hoveredMember}
+              onMemberHover={(name) => setHoveredMember(name)}
+              onMemberLeave={() => setHoveredMember(null)}
+            />
+            <div className="relative w-full">
+              <Board
+                hoveredMember={hoveredMember}
+                onMemberHover={(name) => setHoveredMember(name)}
+                onMemberLeave={() => setHoveredMember(null)}
+              />
+            </div>
+          </div>
+        </>
+      )}
+
+      {!isSmall && !isMedium && (
+        <>
+          <Nav />
+          <div className="flex flex-grow flex-row">
+            <List
+              hoveredMember={hoveredMember}
+              onMemberHover={(name) => setHoveredMember(name)}
+              onMemberLeave={() => setHoveredMember(null)}
+            />
+            <div className="relative w-2/3">
+              <Board
+                hoveredMember={hoveredMember}
+                onMemberHover={(name) => setHoveredMember(name)}
+                onMemberLeave={() => setHoveredMember(null)}
+              />
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 }

apps/webring/src/_components/list.tsx

@@ -18,7 +18,7 @@ export default function List({
   );
 
   return (
-    <div className="flex h-full w-1/3 flex-col items-center justify-center p-4 text-white">
+    <div className="flex h-full flex-col items-center justify-center p-4 text-white md:w-screen lg:w-1/3">
       <h1 className="h-24"></h1>
       <div className="h-3/12 flex w-full flex-row items-end justify-between border-b border-[#757575] text-2xl font-semibold text-[#757575]">
         <h1 className="w-3/12">A-Z</h1>

apps/webring/src/_hooks/window.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+
+export function useIsSmall() {
+  const [isSmall, setIsSmall] = useState(false);
+
+  useEffect(() => {
+    // Check if window exists (to avoid SSR issues)
+    if (typeof window === "undefined") return;
+
+    // Initial check
+    const checkIfSmall = () => {
+      setIsSmall(window.innerWidth < 810); // Common breakpoint for Small
+    };
+
+    // Set initial value
+    checkIfSmall();
+
+    // Add event listener for window resize
+    window.addEventListener("resize", checkIfSmall);
+
+    // Cleanup
+    return () => window.removeEventListener("resize", checkIfSmall);
+  }, []);
+
+  return isSmall;
+}
+
+export function useIsMedium() {
+  const [isMedium, setIsMedium] = useState(false);
+
+  useEffect(() => {
+    // Check if window exists (to avoid SSR issues)
+    if (typeof window === "undefined") return;
+
+    // Initial check
+    const checkIfMedium = () => {
+      setIsMedium(window.innerWidth >= 810 && window.innerWidth < 1024); // Common breakpoint for Medium
+    };
+
+    // Set initial value
+    checkIfMedium();
+
+    // Add event listener for window resize
+    window.addEventListener("resize", checkIfMedium);
+
+    // Cleanup
+    return () => window.removeEventListener("resize", checkIfMedium);
+  }, []);
+
+  return isMedium;
+}