All files / components/windows BrowserContent.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client";
 
import { useState, useRef, useCallback } from "react";
import styles from "@/components/windows/WindowContent.module.css";
import { ArrowLeft, ArrowRight, RotateCw, Home, Search } from "lucide-react";
 
// 🧠 Debug toggle
const DEBUG =
  (typeof process !== "undefined" &&
    process.env.NODE_ENV !== "production") ||
  (typeof process !== "undefined" &&
    process.env.NEXT_PUBLIC_DEBUG === "true");
 
const dlog = (...args: any[]) => {
  if (DEBUG) console.log("[BrowserContent]", ...args);
};
 
interface BrowserContentProps {
  url: string;
}
 
export default function BrowserContent({ url: initialUrl }: BrowserContentProps) {
  const safeUrl =
    initialUrl && typeof initialUrl === "string"
      ? initialUrl
      : "https://example.com";
 
  const [currentUrl, setCurrentUrl] = useState(safeUrl);
  const [inputUrl, setInputUrl] = useState(safeUrl);
  const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
  // 🧭 Input handlers
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputUrl(e.target.value);
  };
 
  const handleNavigate = (e: React.FormEvent) => {
    e.preventDefault();
    let urlToLoad = inputUrl.trim();
    if (!urlToLoad.startsWith("http://") && !urlToLoad.startsWith("https://")) {
      urlToLoad = `https://${urlToLoad}`;
    }
    setCurrentUrl(urlToLoad);
    dlog(`🌐 Navigating to ${urlToLoad}`);
  };
 
  const handleReload = () => {
    if (iframeRef.current) {
      iframeRef.current.src = currentUrl;
      dlog(`🔄 Reloading ${currentUrl}`);
    }
  };
 
  const handleGoHome = () => {
    setCurrentUrl(safeUrl);
    setInputUrl(safeUrl);
    dlog("🏠 Returning to home URL");
  };
 
  const handleGoBack = () => {
    alert(
      "Browser back functionality is limited in this demo due to browser security (CORS)."
    );
    dlog("⚠️ Back navigation attempted");
  };
 
  const handleGoForward = () => {
    alert(
      "Browser forward functionality is limited in this demo due to browser security (CORS)."
    );
    dlog("⚠️ Forward navigation attempted");
  };
 
  return (
    <div className={styles.browserContainer}>
      <div className={styles.browserToolbar}>
        <button onClick={handleGoBack} aria-label="Go back" title="Back">
          <ArrowLeft size={20} />
        </button>
        <button onClick={handleGoForward} aria-label="Go forward" title="Forward">
          <ArrowRight size={20} />
        </button>
        <button onClick={handleReload} aria-label="Reload page" title="Reload">
          <RotateCw size={20} />
        </button>
        <button onClick={handleGoHome} aria-label="Go home" title="Home">
          <Home size={20} />
        </button>
 
        <form
          onSubmit={handleNavigate}
          style={{ flexGrow: 1, display: "flex" }}
          title="Address Bar"
        >
          <input
            type="text"
            value={inputUrl}
            onChange={handleInputChange}
            placeholder="Enter URL or search"
            aria-label="URL input"
          />
          <button type="submit" aria-label="Go" title="Go">
            <Search size={20} />
          </button>
        </form>
      </div>
 
      <iframe
        ref={iframeRef}
        src={currentUrl}
        title="Browser"
        sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
        style={{
          flexGrow: 1,
          border: "none",
          background: "#fff",
        }}
        loading="lazy"
      />
    </div>
  );
}