Settings panel

import * as React from "react";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type SettingsPanelProps = Omit<React.ComponentProps<"section">, "title"> & {
  /** Title in the bar across the top. Omit the title for a plain frame. */
  title?: React.ReactNode;
  /** One line under the title. */
  description?: React.ReactNode;
  /** SettingsRow elements. Hairlines are drawn between them. */
  children: React.ReactNode;
};

/**
 * A bordered surface of settings rows with an optional title bar.
 * Server component; wrap it in your own form if the rows should submit together.
 */
export function SettingsPanel({ title, description, className, children, ...props }: SettingsPanelProps) {
  return (
    <section
      data-slot="settings-panel"
      className={cn("surface-shine flex w-full flex-col overflow-hidden rounded-lg border bg-card", className)}
      {...props}
    >
      {title && (
        <>
          <div className="flex min-h-12 flex-col justify-center gap-0.5 px-4 py-2.5">
            <h2 className="m-0 text-sm leading-5 font-medium text-foreground">{title}</h2>
            {description && <p className="m-0 text-xs text-muted-foreground">{description}</p>}
          </div>
          <Separator />
        </>
      )}
      <div className="divide-y">{children}</div>
    </section>
  );
}

type SettingsRowProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** The setting name. Becomes a label element when htmlFor is set. */
  label: React.ReactNode;
  /** What the setting does, one line. */
  description?: React.ReactNode;
  /** Id of the control, so the label focuses it. */
  htmlFor?: string;
  /** The control: a Switch, a Select, an Input, a Button. */
  children: React.ReactNode;
};

/** One setting: label and description on the left, the control on the right from sm up. */
export function SettingsRow({ label, description, htmlFor, className, children, ...props }: SettingsRowProps) {
  const Text = htmlFor ? "label" : "span";
  return (
    <div
      data-slot="settings-row"
      className={cn("grid gap-3 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:gap-6", className)}
      {...props}
    >
      <div className="flex min-w-0 flex-col gap-0.5">
        <Text htmlFor={htmlFor} className="text-sm leading-5 text-foreground">
          {label}
        </Text>
        {description && <span className="text-sm text-muted-foreground">{description}</span>}
      </div>
      <div className="flex min-w-0 items-center sm:justify-self-end">{children}</div>
    </div>
  );
}