Switch

"use client"

import * as React from "react"
import { MoonIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
import { cn } from "@/lib/utils"

export default function SwitchImmediate() {
  const [dark, setDark] = React.useState(false)

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field orientation="horizontal">
        <Switch id="preview-dark" checked={dark} onCheckedChange={setDark} />
        <FieldLabel htmlFor="preview-dark">Ciemny podgląd</FieldLabel>
      </Field>
      {/* The switch applies instantly — no Save button, no confirmation. */}
      <div
        className={cn(
          dark ? "dark" : "light",
          "flex items-center justify-between gap-4 rounded-xl border bg-card p-4 text-card-foreground shadow-raised transition-colors duration-base"
        )}
      >
        <div className="flex items-center gap-3">
          <span className="flex size-9 items-center justify-center rounded-lg bg-brand-3 text-brand-11">
            <MoonIcon className="size-4" />
          </span>
          <div className="flex flex-col">
            <span className="text-sm font-medium">Tryb nocny</span>
            <span className="text-xs text-muted-foreground">
              Włącza się o 22:00
            </span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant="success">Aktywny</Badge>
          <Button size="xs" variant="outline">
            Edytuj
          </Button>
        </div>
      </div>
    </div>
  )
}

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

const settings = [
  {
    id: "preview-comments",
    title: "Komentarze w podglądach",
    description: "Pozwól recenzentom komentować wdrożenia podglądowe.",
    checked: true,
  },
  {
    id: "skew-protection",
    title: "Ochrona przed rozbieżnością wersji",
    description: "Klienci pozostają przy załadowanej wersji do czasu odświeżenia strony.",
    checked: true,
  },
  {
    id: "public-logs",
    title: "Publiczne logi budowania",
    description: "Każdy, kto ma link, może przeczytać wynik budowania.",
    checked: false,
  },
]

export default function SwitchSettings() {
  return (
    <FieldGroup className="w-full max-w-md gap-4 rounded-xl border bg-card p-5 shadow-raised">
      {settings.map((setting, index) => (
        <div key={setting.id} className="flex flex-col gap-4">
          {index > 0 && <FieldSeparator />}
          <Field orientation="horizontal">
            <FieldContent>
              <FieldLabel htmlFor={setting.id}>{setting.title}</FieldLabel>
              <FieldDescription>{setting.description}</FieldDescription>
            </FieldContent>
            <Switch id={setting.id} defaultChecked={setting.checked} />
          </Field>
        </div>
      ))}
    </FieldGroup>
  )
}

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

export default function SwitchSizes() {
  return (
    <div className="flex w-80 flex-col gap-4">
      <Field orientation="horizontal">
        <Switch id="size-sm" size="sm" defaultChecked />
        <FieldLabel htmlFor="size-sm" className="text-body-xs">
          Mały — gęste listy i wiersze tabel
        </FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Switch id="size-default" defaultChecked />
        <FieldLabel htmlFor="size-default" className="font-normal">
          Domyślny — ustawienia i formularze
        </FieldLabel>
      </Field>
    </div>
  )
}

import {
  Field,
  FieldContent,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

export default function SwitchStates() {
  return (
    <FieldGroup className="w-80 gap-4">
      <Field orientation="horizontal" data-disabled>
        <Switch id="switch-disabled-off" disabled />
        <FieldLabel htmlFor="switch-disabled-off" className="font-normal">
          Zablokowany
        </FieldLabel>
      </Field>
      <Field orientation="horizontal" data-disabled>
        <Switch id="switch-disabled-on" disabled defaultChecked />
        <FieldLabel htmlFor="switch-disabled-on" className="font-normal">
          Zablokowany i włączony
        </FieldLabel>
      </Field>
      <Field orientation="horizontal" data-invalid>
        <Switch id="switch-invalid" aria-invalid />
        <FieldContent>
          <FieldLabel htmlFor="switch-invalid">
            Uwierzytelnianie dwuskładnikowe
          </FieldLabel>
          <FieldError>
            Twoja organizacja wymaga 2FA od wszystkich członków.
          </FieldError>
        </FieldContent>
      </Field>
    </FieldGroup>
  )
}