Browser Window

1import type * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5type BrowserWindowProps = React.ComponentProps<"div"> & {
6  address?: React.ReactNode;
7  addressHref?: string;
8};
9 
10function BrowserWindow({
11  address = "about:blank",
12  addressHref,
13  className,
14  children,
15  ...props
16}: BrowserWindowProps) {
17  return (
18    <div
19      data-slot="browser-window"
20      className={cn(
21        "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm",
22        className,
23      )}
24      {...props}
25    >
26      <div
27        data-slot="browser-window-toolbar"
28        className="flex h-9 items-center gap-2 border-b border-zinc-200 bg-zinc-100 px-2 dark:border-zinc-800 dark:bg-zinc-900"
29      >
30        <div
31          aria-hidden="true"
32          data-slot="browser-window-controls"
33          className="flex shrink-0 items-center gap-1.5"
34        >
35          <div className="size-2 rounded-full bg-[#FF5F57]" />
36          <div className="size-2 rounded-full bg-[#FEBC2E]" />
37          <div className="size-2 rounded-full bg-[#28C840]" />
38        </div>
39        <div
40          aria-label="Address"
41          data-slot="browser-window-address"
42          className="flex min-w-0 flex-1 items-center rounded-sm bg-zinc-200 px-2 py-[3px] dark:bg-zinc-800"
43        >
44          {addressHref ? (
45            <a
46              href={addressHref}
47              target="_blank"
48              rel="noreferrer"
49              className="block w-full truncate text-center text-[10px] font-medium text-zinc-500 dark:text-zinc-400"
50            >
51              {address}
52            </a>
53          ) : (
54            <span className="block truncate">{address}</span>
55          )}
56        </div>
57      </div>
58      {children}
59    </div>
60  );
61}
62 
63function BrowserWindowContent({ className, ...props }: React.ComponentProps<"div">) {
64  return (
65    <div
66      data-slot="browser-window-content"
67      className={cn("overflow-hidden bg-background", className)}
68      {...props}
69    />
70  );
71}
72 
73function BrowserWindowImage({ className, alt, ...props }: React.ComponentProps<"img">) {
74  return (
75    <img
76      data-slot="browser-window-image"
77      alt={alt}
78      className={cn("block size-full object-cover", className)}
79      {...props}
80    />
81  );
82}
83 
84export { BrowserWindow, BrowserWindowContent, BrowserWindowImage };