desktop-window

1"use client"
2 
3import * as React from "react"
4import { cva } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7 
8type DesktopWindowOs = "macos" | "windows" | "ubuntu"
9 
10const DesktopWindowContext = React.createContext<{ os: DesktopWindowOs }>({
11  os: "macos",
12})
13 
14function useDesktopWindowOs() {
15  return React.useContext(DesktopWindowContext).os
16}
17 
18const desktopWindowVariants = cva(
19  "flex flex-col overflow-hidden border border-black/10 shadow-2xl dark:border-white/10",
20  {
21    variants: {
22      os: {
23        macos: "rounded-[0.625rem]",
24        windows: "rounded-lg",
25        ubuntu: "rounded-xl",
26      },
27    },
28    defaultVariants: {
29      os: "macos",
30    },
31  }
32)
33 
34const desktopWindowTitlebarVariants = cva(
35  "group/titlebar relative flex shrink-0 items-center select-none",
36  {
37    variants: {
38      os: {
39        macos:
40          "h-7 border-b border-black/10 bg-[oklch(0.943_0_0)] px-5 dark:border-white/10 dark:bg-[oklch(0.294_0.004_286.2)]",
41        windows:
42          "h-8 bg-[oklch(0.964_0_0)] ps-3 pe-0 dark:bg-[oklch(0.244_0_0)]",
43        ubuntu:
44          "h-12 border-b border-black/10 bg-[oklch(0.94_0_0)] px-3 dark:border-white/10 dark:bg-[oklch(0.309_0_0)]",
45      },
46    },
47    defaultVariants: {
48      os: "macos",
49    },
50  }
51)
52 
53// macOS and Ubuntu center the title on the window, so it is taken out of flow.
54// The inset -- not padding -- reserves room for the controls, because `truncate`
55// clips at the title's own padding box: padding would leave the text free to
56// render straight over the buttons, while an inset moves the clip edge itself.
57//
58// The inset is the titlebar's horizontal padding PLUS the controls' width. An
59// absolutely positioned box resolves against its ancestor's padding box, and a
60// padding box *includes* that padding rather than excluding it, so the titlebar's
61// own `px-*` has to be added here or the title starts on top of the controls.
62//
63//   macOS   px-5 (20px) + three 12px lights + two 8px gaps  = 72px = inset-x-18
64//   Ubuntu  px-3 (12px) + three 24px buttons + two 6px gaps = 96px = inset-x-24
65const desktopWindowTitleVariants = cva("truncate", {
66  variants: {
67    os: {
68      macos:
69        "pointer-events-none absolute inset-x-18 text-center text-[0.8125rem]/[1] font-semibold text-black/70 dark:text-white/80",
70      windows:
71        "min-w-0 pe-2 text-[0.75rem]/[1] font-normal text-black/80 dark:text-white/90",
72      ubuntu:
73// … truncated