Omarchy Desktop Panel

"use client"

import * as React from "react"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { OmarchyShortcut } from "@/components/ui/omarchy-keycap"
import { OmarchyStatus } from "@/components/ui/omarchy-status"
import {
  OmarchyWorkspaceSwitcher,
  type OmarchyWorkspace,
} from "@/components/ui/omarchy-workspace-switcher"

const workspaces: readonly OmarchyWorkspace[] = [
  { id: "1", occupied: true },
  { id: "2", occupied: true },
  { id: "3" },
  { id: "4", urgent: true },
  { id: "5" },
]

export function OmarchyDesktopPanel() {
  const [workspace, setWorkspace] = React.useState("1")
  const workspaceHeadingId = React.useId()
  const servicesHeadingId = React.useId()

  return (
    <Card className="w-full max-w-lg">
      <CardHeader>
        <CardTitle>Desktop</CardTitle>
        <CardDescription>
          A keyboard-first overview of workspaces and services.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-5">
        <section
          className="flex flex-col gap-2"
          aria-labelledby={workspaceHeadingId}
        >
          <h3
            id={workspaceHeadingId}
            className="text-sm font-medium text-muted-foreground"
          >
            Workspaces
          </h3>
          <OmarchyWorkspaceSwitcher
            workspaces={workspaces}
            value={workspace}
            onValueChange={setWorkspace}
          />
        </section>

        <section
          className="flex flex-col gap-2"
          aria-labelledby={servicesHeadingId}
        >
          <h3
            id={servicesHeadingId}
            className="text-sm font-medium text-muted-foreground"
          >
            Services
          </h3>
          <ul className="flex flex-wrap gap-2">
            <li>
              <OmarchyStatus status="active">Network</OmarchyStatus>
            </li>
            <li>
              <OmarchyStatus status="active">Audio</OmarchyStatus>
            </li>
            <li>
              <OmarchyStatus status="idle">Night light</OmarchyStatus>
            </li>
          </ul>
        </section>
      </CardContent>
      <CardFooter className="justify-between gap-4">
        <span className="text-sm text-muted-foreground">
          Workspace {workspace}
        </span>
        <OmarchyShortcut keys={["Super", workspace]} />
      </CardFooter>
    </Card>
  )
}