"use client" import type React from "react" import { useEffect, useState } from "react" import Image from "next/image" import { Battery, BookmarkIcon, ChevronLeft, ChevronRight, Download, Globe, History, Home, Lock, Maximize2, Minimize2, MoreHorizontal, Plus, RotateCcw, Search, Settings, Shield, Square, Star, StarOff, Volume2, Wifi, X, } from "lucide-react" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" interface Tab { id: string title: string url: string favicon?: string isActive: boolean isLoading: boolean } interface Bookmark { id: string title: string url: string favicon?: string } interface HistoryItem { id: string title: string url: string timestamp: Date favicon?: string } interface BrowserProps { image?: string initialUrl?: string initialTabs?: Partial[] theme?: "light" | "dark" | "system" showWindowControls?: boolean showBookmarksBar?: boolean showStatusBar?: boolean className?: string enableTabManagement?: boolean enableBookmarks?: boolean enableHistory?: boolean enableDownloads?: boolean enableSettings?: boolean maxTabs?: number customBookmarks?: Bookmark[] customHistory?: HistoryItem[] onNavigate?: (url: string, tabId: string) => void onTabCreate?: (tab: Tab) => void onTabClose?: (tabId: string) => void onTabSwitch?: (tabId: string) => void onBookmarkToggle?: (url: string, isBookmarked: boolean) => void onDownload?: (url: string) => void renderContent?: (url: string, isLoading: boolean) => React.ReactNode customFavicons?: Record openLinksInNewTab?: boolean autoFocusAddressBar?: boolean simulateLoading?: boolean loadingDuration?: number } export function Browser({ image = "/placeholder.svg", initialUrl = "https://eldoraui.site", initialTabs, showWindowControls = false, showBookmarksBar = false, showStatusBar = true, className, enableTabManagement = false, enableBookmarks = true, enableHistory = true, enableDownloads = true, enableSettings = true, maxTabs = 10, customBookmarks, customHistory, onNavigate, onTabCreate, onTabClose, onTabSwitch, onBookmarkToggle, onDownload, renderContent, autoFocusAddressBar = false, simulateLoading = true, loadingDuration = 1000, }: BrowserProps = {}) { const [tabs, setTabs] = useState(() => { if (initialTabs && initialTabs.length > 0) { return initialTabs.map((tab, index) => ({ id: tab.id || Date.now().toString() + index, title: tab.title || "New Tab", url: tab.url || initialUrl, favicon: tab.favicon, isActive: index === 0, isLoading: false, })) } return [ { id: "1", title: "New Tab", url: initialUrl, isActive: true, isLoading: false, }, ] }) const [currentUrl, setCurrentUrl] = useState(initialUrl) const [inputUrl, setInputUrl] = useState(initialUrl) const [isSecure, setIsSecure] = useState(true) const [canGoBack, setCanGoBack] = useState(false) const [canGoForward, setCanGoForward] = useState(false) const [isBookmarked, setIsBookmarked] = useState(false) const [showBookmarks, setShowBookmarks] = useState(false) const [showHistory, setShowHistory] = useState(false) const [showSettings, setShowSettings] = useState(false) const [isFullscreen, setIsFullscreen] = useState(false) const [downloadProgress, setDownloadProgress] = useState(0) const [isDownloading, setIsDownloading] = useState(false) const [bookmarks] = useState( customBookmarks || [ { id: "1", title: "Google", url: "https://www.google.com", favicon: "🔍", }, { id: "2", title: "GitHub", url: "https://github.com", favicon: "🐙" }, { id: "3", title: "Stack Overflow", url: "https://stackoverflow.com", favicon: "📚", }, { id: "4", title: "MDN Web Docs", url: "https://developer.mozilla.org", favicon: "📖", }, ] ) const [history] = useState( customHistory || [ { id: "1", title: "Google", url: "https://www.google.com", timestamp: new Date(Date.now() - 3600000), favicon: "🔍", }, { id: "2", title: "GitHub", url: "https://github.com", timestamp: new Date(Date.now() - 7200000), favicon: "🐙", }, { id: "3", title: "Stack Overflow", url: "https://stackoverflow.com", timestamp: new Date(Date.now() - 10800000), favicon: "📚", }, ] ) const activeTab = tabs.find((tab) => tab.isActive) useEffect(() => { if (autoFocusAddressBar) { const addressBar = document.querySelector( 'input[placeholder*="Search or enter address"]' ) as HTMLInputElement if (addressBar) { addressBar.focus() } } }, [autoFocusAddressBar]) const createNewTab = () => { if (tabs.length >= maxTabs) return const newTab: Tab = { id: Date.now().toString(), title: "New Tab", url: "about:blank", isActive: true, isLoading: false, } setTabs((prev) => prev.map((tab) => ({ ...tab, isActive: false })).concat(newTab) ) setCurrentUrl("about:blank") setInputUrl("") onTabCreate?.(newTab) } const closeTab = (tabId: string) => { if (tabs.length === 1) return const tabIndex = tabs.findIndex((tab) => tab.id === tabId) const wasActive = tabs[tabIndex].isActive const newTabs = tabs.filter((tab) => tab.id !== tabId) if (wasActive && newTabs.length > 0) { const nextActiveIndex = Math.min(tabIndex, newTabs.length - 1) newTabs[nextActiveIndex].isActive = true setCurrentUrl(newTabs[nextActiveIndex].url) setInputUrl(newTabs[nextActiveIndex].url) } setTabs(newTabs) onTabClose?.(tabId) } const switchTab = (tabId: string) => { const newTabs = tabs.map((tab) => ({ ...tab, isActive: tab.id === tabId, })) const activeTab = newTabs.find((tab) => tab.isActive) if (activeTab) { setCurrentUrl(activeTab.url) setInputUrl(activeTab.url) } setTabs(newTabs) onTabSwitch?.(tabId) } const navigateToUrl = (url: string) => { if ( !url.startsWith("http://") && !url.startsWith("https://") && !url.startsWith("about:") ) { url = `https://www.google.com/search?q=${encodeURIComponent(url)}` } setCurrentUrl(url) setInputUrl(url) setIsSecure(url.startsWith("https://")) setTabs((prev) => prev.map((tab) => tab.isActive ? { ...tab, url, title: new URL(url).hostname || "New Tab", isLoading: simulateLoading, } : tab ) ) const activeTabId = tabs.find((tab) => tab.isActive)?.id || "" onNavigate?.(url, activeTabId) if (simulateLoading) { setTimeout(() => { setTabs((prev) => prev.map((tab) => (tab.isActive ? { ...tab, isLoading: false } : tab)) ) }, loadingDuration) } } const handleUrlSubmit = (e: React.FormEvent) => { e.preventDefault() navigateToUrl(inputUrl) } const goBack = () => { setCanGoForward(true) } const goForward = () => { setCanGoBack(true) } const refresh = () => { setTabs((prev) => prev.map((tab) => (tab.isActive ? { ...tab, isLoading: true } : tab)) ) setTimeout(() => { setTabs((prev) => prev.map((tab) => (tab.isActive ? { ...tab, isLoading: false } : tab)) ) }, 1000) } const toggleBookmark = () => { const newBookmarkedState = !isBookmarked setIsBookmarked(newBookmarkedState) onBookmarkToggle?.(currentUrl, newBookmarkedState) } const simulateDownload = () => { onDownload?.(currentUrl) if (!enableDownloads) return setIsDownloading(true) setDownloadProgress(0) const interval = setInterval(() => { setDownloadProgress((prev) => { if (prev >= 100) { clearInterval(interval) setIsDownloading(false) return 0 } return prev + 10 }) }, 200) } return (

{showWindowControls && (

{new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })}

)} {enableTabManagement && (

{tabs.map((tab) => (

switchTab(tab.id)} >

{tab.isLoading ? (

) : ( )} {tab.title}

{tabs.length > 1 && ( )}

))}

)}

{enableBookmarks && ( )} {enableDownloads && ( )} {enableSettings && ( )}

{showBookmarksBar && enableBookmarks && (

{enableHistory && ( )} {bookmarks.slice(0, 4).map((bookmark) => ( ))}

)} {isDownloading && enableDownloads && (

Downloading file...

{downloadProgress}%

)}

{showBookmarks && enableBookmarks && (

Bookmarks

{bookmarks.map((bookmark) => (

navigateToUrl(bookmark.url)} > {bookmark.favicon}

{bookmark.title}

{bookmark.url}

))}

)} {showHistory && enableHistory && (

History

{history.map((item) => (

navigateToUrl(item.url)} > {item.favicon}

{item.title}

{item.url}

{item.timestamp.toLocaleTimeString()}

))}

)} {showSettings && enableSettings && (

Settings

Privacy & Security

Block pop-ups On

Safe browsing Enhanced

Appearance

Theme System

Zoom 100%

)}

{renderContent ? ( renderContent(currentUrl, activeTab?.isLoading || false) ) : currentUrl === "about:blank" || currentUrl === "" ? (

New Tab

Start by searching or entering a web address

{bookmarks.slice(0, 4).map((bookmark) => ( navigateToUrl(bookmark.url)} >

{bookmark.favicon}

{bookmark.title}

))}

) : (

)}

{showStatusBar && (

Ready {isSecure && ( Secure )}

Zoom: 100% {tabs.length} tab{tabs.length !== 1 ? "s" : ""}

)}

) }

browser

Instalação

Dependências

Registry dependencies