Dock

"use client"

import { CompassIcon, FolderIcon, MailIcon, MusicIcon } from "lucide-react"

import { Dock, DockIcon, DockItem } from "@/components/ui/dock"

const apps = [
  { name: "Finder", icon: FolderIcon, className: "bg-linear-to-b from-sky-400 to-blue-600 text-white" },
  { name: "Safari", icon: CompassIcon, className: "bg-linear-to-b from-white to-zinc-200 text-blue-500" },
  { name: "Mail", icon: MailIcon, className: "bg-linear-to-b from-sky-300 to-blue-500 text-white" },
  { name: "Music", icon: MusicIcon, className: "bg-linear-to-b from-rose-400 to-red-600 text-white" },
]

// The Dock slides in when the pointer reaches the bottom edge of its
// container, and slides away again when the pointer moves up.
export default function DockAutoHide() {
  return (
    <div className="relative flex h-48 w-full max-w-lg items-center justify-center overflow-hidden rounded-mac-group border border-dashed border-white/30 px-6 text-center text-mac-body text-white/80">
      Move the pointer to the bottom edge of this area.
      <Dock autoHide size={40} className="absolute bottom-2 left-1/2 -translate-x-1/2">
        {apps.map((app) => (
          <DockItem key={app.name} label={app.name}>
            <DockIcon className={app.className}>
              <app.icon />
            </DockIcon>
          </DockItem>
        ))}
      </Dock>
    </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>
  )
}