Window

"use client"

import {
  Window,
  WindowContent,
  WindowControls,
  WindowMain,
  WindowTitle,
  WindowTitlebar,
} from "@/components/ui/window"

// The window in the back: grey traffic lights, a dimmed title and a grey accent.
export default function WindowInactive() {
  return (
    <div className="relative h-64 w-full max-w-lg">
      <Window inactive className="absolute top-0 left-0 h-44 w-72">
        <WindowMain>
          <WindowTitlebar>
            <WindowControls />
            <WindowTitle>Inactive</WindowTitle>
          </WindowTitlebar>
          <WindowContent />
        </WindowMain>
      </Window>
      <Window className="absolute right-0 bottom-0 h-44 w-72">
        <WindowMain>
          <WindowTitlebar>
            <WindowControls />
            <WindowTitle>Active</WindowTitle>
          </WindowTitlebar>
          <WindowContent />
        </WindowMain>
      </Window>
    </div>
  )
}

"use client"

import * as React from "react"

import {
  Window,
  WindowContent,
  WindowControls,
  WindowMain,
  WindowTitle,
  WindowTitlebar,
} from "@/components/ui/window"

const windows = [
  { id: "notes", title: "Notes", className: "top-4 left-4" },
  { id: "preview", title: "Preview", className: "right-4 bottom-4" },
]

// Drag a window by its title bar. Clicking a window brings it to the front
// and makes it active; bounds="parent" keeps it inside this area.
export default function WindowDraggable() {
  const [order, setOrder] = React.useState(windows.map((item) => item.id))
  const active = order[order.length - 1]

  return (
    <div className="relative h-80 w-full max-w-xl">
      {windows.map((item) => (
        <Window
          key={item.id}
          draggable
          bounds="parent"
          inactive={item.id !== active}
          onPointerDownCapture={() =>
            setOrder((current) => [...current.filter((id) => id !== item.id), item.id])
          }
          className={`absolute h-40 w-64 ${item.className}`}
          style={{ zIndex: order.indexOf(item.id) + 1 }}
        >
          <WindowMain>
            <WindowTitlebar>
              <WindowControls />
              <WindowTitle>{item.title}</WindowTitle>
            </WindowTitlebar>
            <WindowContent className="flex items-center justify-center p-4 text-center text-mac-label-secondary">
              Drag me by the title bar.
            </WindowContent>
          </WindowMain>
        </Window>
      ))}
    </div>
  )
}

"use client"

import * as React from "react"
import { FileTextIcon } from "lucide-react"

import { Dock, DockIcon, DockItem } from "@/components/ui/dock"
import {
  Window,
  WindowContent,
  WindowControls,
  WindowMain,
  WindowTitle,
  WindowTitlebar,
} from "@/components/ui/window"

// The yellow traffic light minimizes the window into its app's Dock icon
// with the Genie effect; click the icon to bring it back. The green one
// zooms it to fill the area, the red one closes it.
export default function WindowMinimize() {
  const [open, setOpen] = React.useState(true)
  const [minimized, setMinimized] = React.useState(false)
  const [maximized, setMaximized] = React.useState(false)
  const icon = React.useRef<HTMLButtonElement>(null)

  return (
    <div className="relative h-96 w-full max-w-2xl overflow-hidden">
      {open && (
        <Window
          className="absolute inset-x-0 top-6 mx-auto h-56 w-80"
          minimized={minimized}
          minimizeTo={icon}
          maximized={maximized}
          maximizeInsets={{ top: 8, right: 8, bottom: 88, left: 8 }}
          onClose={() => {
            setOpen(false)
            setMaximized(false)
          }}
          onMinimize={() => setMinimized(true)}
          onZoom={() => setMaximized((value) => !value)}
        >
          <WindowMain>
            <WindowTitlebar>
              <WindowControls />
              <WindowTitle>Notes.txt</WindowTitle>
            </WindowTitlebar>
            <WindowContent className="p-4 text-mac-label-secondary">
              Minimize me into the Dock, or double-click the title bar to zoom.
            </WindowContent>
          </WindowMain>
        </Window>
      )}
      <Dock size={48} className="absolute bottom-2 left-1/2 -translate-x-1/2">
        <DockItem
          ref={icon}
          label="TextEdit"
          running={open}
          onClick={() => {
            setOpen(true)
            setMinimized(false)
          }}
        >
          <DockIcon className="bg-linear-to-b from-white to-zinc-200 text-zinc-600">
            <FileTextIcon />
          </DockIcon>
        </DockItem>
      </Dock>
    </div>
  )
}

"use client"

import * as React from "react"

import {
  Window,
  WindowContent,
  WindowControls,
  WindowMain,
  WindowTitle,
  WindowTitlebar,
} from "@/components/ui/window"

// Drag an edge or a corner to resize the window. Double-click an edge to
// stretch it to the edge of the area; with Option, the opposite edge too.
export default function WindowResizable() {
  const [size, setSize] = React.useState({ width: 360, height: 220 })

  return (
    <div className="relative h-96 w-full max-w-2xl">
      <Window
        resizable
        draggable
        bounds="parent"
        size={size}
        onSizeChange={setSize}
        minSize={{ width: 240, height: 140 }}
        className="absolute top-8 left-8"
      >
        <WindowMain>
          <WindowTitlebar>
            <WindowControls />
            <WindowTitle>Untitled</WindowTitle>
          </WindowTitlebar>
          <WindowContent className="flex items-center justify-center text-mac-label-secondary tabular-nums">
            {size.width} × {size.height}
          </WindowContent>
        </WindowMain>
      </Window>
    </div>
  )
}