Secure

import type React from "react" import { cn } from "@/lib/utils" interface SidebarItem { icon?: React.ReactNode label: string active?: boolean badge?: string | number } interface WindowControlsProps { variant?: "macos" | "windows" | "chrome" | "safari" headerStyle?: "minimal" | "full" } interface AddressBarProps { url?: string secure?: boolean variant?: "chrome" | "safari" className?: string } interface SidebarContentProps { items?: SidebarItem[] variant?: "navigation" | "bookmarks" | "history" | "extensions" className?: string } interface BrowserWindowProps { children?: React.ReactNode className?: string size?: "sm" | "md" | "lg" | "xl" showSidebar?: boolean sidebarPosition?: "left" | "right" | "top" | "bottom" headerStyle?: "minimal" | "full" variant?: "chrome" | "safari" | "generic" theme?: "light" | "dark" | "auto" url?: string sidebarItems?: Array<{ icon?: React.ReactNode label: string active?: boolean badge?: string | number }> } function WindowControls({ variant = "macos", headerStyle = "full", }: WindowControlsProps) { const sizeClasses = "size-2" if (variant === "macos" || variant === "safari") { const dotColors = headerStyle === "minimal" ? { red: "bg-muted border border-foreground/20", yellow: "bg-muted border border-foreground/20", green: "bg-muted border border-foreground/20", } : { red: "bg-red-500 hover:bg-red-600 border border-foreground/20", yellow: "bg-yellow-500 hover:bg-yellow-600 border border-foreground/20", green: "bg-green-500 hover:bg-green-600 border border-foreground/20 ", } return (

{headerStyle !== "minimal" && (

)}

{headerStyle !== "minimal" && (

)}

{headerStyle !== "minimal" && (

)}

) } if (variant === "windows") { return (

) } if (variant === "chrome") { return (

) } return (

) } function AddressBar({ url = "https://example.com", secure = true, variant = "chrome", className = "", }: AddressBarProps) { const variantStyles = { chrome: "bg-muted/30 rounded-full border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-sm", safari: "bg-muted/20 rounded-lg border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-sm", } const iconColors = { chrome: "text-muted-foreground/60", safari: "text-muted-foreground/60", } return (

{secure && (

)} {url}

) } function SidebarContent({ items = [ { label: "Dashboard", active: true }, { label: "Analytics", badge: "3" }, { label: "Settings" }, { label: "Profile" }, ], className = "", }: SidebarContentProps) { return (

{items.map((item, index) => (

{item.icon && (

{item.icon}

)} {item.label} {item.badge && (

{item.badge}

)}

))}

) } export function BrowserWindow({ children, className = "", size = "md", showSidebar = false, sidebarPosition = "left", headerStyle = "minimal", variant = "generic", theme = "auto", url, sidebarItems, }: BrowserWindowProps) { const sizeClasses = { sm: "h-64 max-w-sm", md: "h-80 max-w-2xl", lg: "h-96 max-w-4xl", xl: "h-[32rem] max-w-6xl", } const sidebarSizes = { sm: "w-32", md: "w-48", lg: "w-56", xl: "w-64", } const themeClasses = theme === "dark" ? "bg-background border-border" : theme === "light" ? "bg-background border-border" : "bg-background border-border" const getHeaderStyles = () => { const baseStyles = "h-11 border-b border-foreground/5 flex items-center px-4" if (variant === "chrome") { return `${baseStyles} bg-muted/10 overflow-hidden` } if (variant === "safari") { return `${baseStyles} bg-muted/10 overflow-hidden border-b border-border/30` } return `${baseStyles} bg-muted/20` } return (

{headerStyle === "full" && ( )}

{showSidebar && sidebarPosition === "top" && (

)}

{/* Left Sidebar */} {showSidebar && sidebarPosition === "left" && (

)} {/* Main Content Area */}

{children ||

{children}

}

{/* Right Sidebar */} {showSidebar && sidebarPosition === "right" && (

)}

{/* Bottom Sidebar */} {showSidebar && sidebarPosition === "bottom" && (

)}

) }

Mock Browser Window

Instalação

Registry dependencies