Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x | "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>
);
}
|