Window

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5function Window({ className, ...props }: React.ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="window"
9      className={cn(
10        "overflow-hidden rounded-[10px] bg-[repeating-linear-gradient(180deg,rgba(255,255,255,0.06)_0px,rgba(255,255,255,0.06)_1px,rgba(0,0,0,0.03)_1px,rgba(0,0,0,0.03)_2px),linear-gradient(180deg,#d9dbde_0%,#c3c6ca_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.7),0_0_0_1px_rgba(40,45,55,0.35),0_18px_40px_rgba(30,40,60,0.3),0_4px_10px_rgba(30,40,60,0.2)]",
11        className
12      )}
13      {...props}
14    />
15  )
16}
17 
18function WindowTitlebar({ className, ...props }: React.ComponentProps<"div">) {
19  return (
20    <div
21      data-slot="window-titlebar"
22      className={cn("relative flex h-[34px] items-center px-3", className)}
23      {...props}
24    />
25  )
26}
27 
28function WindowTitle({ className, ...props }: React.ComponentProps<"span">) {
29  return (
30    <span
31      data-slot="window-title"
32      className={cn(
33        "pointer-events-none absolute inset-x-0 text-center text-[13px] font-semibold text-[#43484f] [text-shadow:0_1px_0_rgba(255,255,255,0.6)]",
34        className
35      )}
36      {...props}
37    />
38  )
39}
40 
41const LIGHT_TINTS = {
42  red: "border-[#c93a2b] bg-[radial-gradient(circle_at_50%_30%,#ff8a80,#ec4c3c_70%)]",
43  yellow: "border-[#cf9325] bg-[radial-gradient(circle_at_50%_30%,#ffe082,#f5b731_70%)]",
44  green: "border-[#43a12f] bg-[radial-gradient(circle_at_50%_30%,#b9f6a5,#56c93f_70%)]",
45} as const
46 
47function TrafficLights({ className, ...props }: React.ComponentProps<"div">) {
48  const lights = Object.keys(LIGHT_TINTS) as Array<keyof typeof LIGHT_TINTS>
49 
50  return (
51    <div
52      data-slot="traffic-lights"
53      className={cn("z-10 flex gap-2", className)}
54      {...props}
55    >
56      {lights.map((tint) => (
57        <span
58          key={tint}
59          className={cn(
60            "relative size-[13px] rounded-full border shadow-[inset_0_1px_2px_rgba(0,0,0,0.25),0_1px_0_rgba(255,255,255,0.5)] after:absolute after:left-[3px] after:right-[3px] after:top-px after:h-[5px] after:rounded-full after:bg-[linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.15))] after:content-['']",
61            LIGHT_TINTS[tint]
62          )}
63        />
64      ))}
65    </div>
66  )
67}
68 
69function WindowContent({ className, ...props }: React.ComponentProps<"div">) {
70  return (
71    <div
72      data-slot="window-content"
73// … truncated