feat(resources): add iframe of 2 websites for content

Author: eric15342335

src/app/resources/page.tsx

@@ -1,5 +1,5 @@
 import { Metadata } from "next";
-import { ComingSoon } from "@/components/sections/coming-soon";
+import { ResourceIframe } from "@/components/sections/resource-iframe";
 import { siteConfig } from "@/lib/config";
 
 const title = "Resources";
@@ -31,8 +31,23 @@ export const metadata: Metadata = {
 
 export default function Resources() {
   return (
-    <>
-      <ComingSoon />
-    </>
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8 text-center">
+        <p className="text-lg text-muted-foreground">
+          Here are some recommended websites. They offer more details and different perspectives on our
+          chapter's topics.
+        </p>
+      </div>
+      <div className="space-y-8">
+        <ResourceIframe
+          title="Where She Stood - WWII"
+          websiteUrl="https://whereshestoodwwii.wixsite.com/where-she-stood"
+        />
+        <ResourceIframe
+          title="The Spine of the Nation"
+          websiteUrl="https://thespineofthenation.wordpress.com"
+        />
+      </div>
+    </div>
   );
 }

src/components/sections/resource-iframe.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback, RefObject } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { cn, noReturnDebounce } from "@/lib/utils";
+
+const IFRAME_DEFAULTS = {
+  WIDTH: 1338,
+  HEIGHT: 600,
+} as const;
+
+function calculateResponsiveScale(containerWidth: number, sourceWidth: number): number {
+  if (!containerWidth || !sourceWidth) return 1;
+  return Math.min(containerWidth / sourceWidth, 1);
+}
+
+function createScaleTransformStyle(scale: number) {
+  return {
+    transform: `scale(${scale})`,
+    transformOrigin: "top left",
+    width: `${100 / scale}%`,
+    height: `${100 / scale}%`,
+  };
+}
+
+/**
+ * A hook to calculate the responsive scale of an element based on its container's width.
+ */
+function useResponsiveScale(targetRef: RefObject<HTMLElement | null>, sourceWidth: number): number {
+  const [scale, setScale] = useState(1);
+
+  const updateScale = useCallback(() => {
+    if (!targetRef.current) return;
+    const newScale = calculateResponsiveScale(targetRef.current.clientWidth, sourceWidth);
+    setScale(newScale);
+  }, [targetRef, sourceWidth]);
+
+  useEffect(() => {
+    updateScale();
+    const debouncedUpdate = noReturnDebounce(updateScale);
+    window.addEventListener("resize", debouncedUpdate);
+    return () => window.removeEventListener("resize", debouncedUpdate);
+  }, [updateScale]);
+
+  return scale;
+}
+
+interface ResourceIframeProps {
+  websiteUrl: string;
+  title: string;
+  className?: string;
+  scale?: number;
+  desktopWidth?: number;
+  containerHeight?: number;
+}
+
+export function ResourceIframe({
+  websiteUrl,
+  title,
+  className,
+  scale: forcedScale,
+  desktopWidth = IFRAME_DEFAULTS.WIDTH,
+  containerHeight = IFRAME_DEFAULTS.HEIGHT,
+}: ResourceIframeProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const calculatedScale = useResponsiveScale(containerRef, desktopWidth);
+
+  const finalScale = forcedScale ?? calculatedScale;
+  const scaleWrapperStyle = createScaleTransformStyle(finalScale);
+
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <CardTitle>{title}</CardTitle>
+          <Button
+            asChild
+            variant="outline"
+          >
+            <a
+              href={websiteUrl}
+              target="_blank"
+              rel="noopener"
+            >
+              Visit Full Website →
+            </a>
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div
+          ref={containerRef}
+          className="relative hidden w-full overflow-hidden rounded-lg border md:block"
+          style={{ height: containerHeight }}
+        >
+          {isLoading && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center bg-muted">
+              <p className="text-muted-foreground">Loading website...</p>
+            </div>
+          )}
+          <div
+            className="h-full w-full"
+            style={scaleWrapperStyle}
+          >
+            <iframe
+              src={websiteUrl}
+              title={title}
+              allowFullScreen
+              className="h-full w-full border-0"
+              onLoad={() => setIsLoading(false)}
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/lib/utils.ts

@@ -4,3 +4,17 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function noReturnDebounce<T extends unknown[]>(
+  func: (...args: T) => void,
+  delay: number = 100
+): (...args: T) => void {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return (...args: T) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+}