Checkbox

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel } from "@/components/ui/field"

const FILTERS = [
  { id: "chs", label: "只看简体中文", checked: true },
  { id: "batch", label: "隐藏合集" },
  { id: "finished", label: "包含已完结的番剧", checked: true },
  { id: "2160p", label: "只看 2160p（暂无片源）", disabled: true },
]

export default function CheckboxDemo() {
  return (
    <div className="flex flex-col gap-3">
      {FILTERS.map((filter) => (
        <Field key={filter.id} orientation="horizontal">
          <Checkbox id={`checkbox-demo-${filter.id}`} defaultChecked={filter.checked} disabled={filter.disabled} />
          <FieldLabel htmlFor={`checkbox-demo-${filter.id}`}>{filter.label}</FieldLabel>
        </Field>
      ))}
    </div>
  )
}

import { Checkbox } from "@/components/ui/checkbox"

export default function CheckboxStates() {
  return (
    <div className="grid grid-cols-3 items-center gap-x-8 gap-y-4 text-[12px] text-muted-foreground sm:grid-cols-6">
      <span className="flex flex-col items-center gap-2">
        <Checkbox aria-label="未选" />
        未选
      </span>
      <span className="flex flex-col items-center gap-2">
        <Checkbox aria-label="已选" defaultChecked />
        已选
      </span>
      <span className="flex flex-col items-center gap-2">
        <Checkbox aria-label="部分" checked="indeterminate" />
        部分
      </span>
      <span className="flex flex-col items-center gap-2">
        <Checkbox aria-label="出错" aria-invalid />
        出错
      </span>
      <span className="flex flex-col items-center gap-2">
        <Checkbox aria-label="禁用" disabled />
        禁用
      </span>
      <span className="flex flex-col items-center gap-2">
        <Checkbox aria-label="禁用且已选" disabled defaultChecked />
        禁用已选
      </span>
    </div>
  )
}

"use client"

import { useState } from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel } from "@/components/ui/field"

const EPISODES = ["第 09 集", "第 10 集", "第 11 集", "第 12 集"]

export default function CheckboxSelectAll() {
  const [picked, setPicked] = useState<string[]>(["第 11 集", "第 12 集"])
  const all = picked.length === EPISODES.length
  const some = picked.length > 0 && !all

  return (
    <div className="anibt-well flex w-full max-w-xs flex-col">
      <Field orientation="horizontal" className="anibt-stitch-under px-3 py-2.5">
        <Checkbox
          id="checkbox-select-all"
          checked={all ? true : some ? "indeterminate" : false}
          onCheckedChange={(checked) => setPicked(checked === true ? EPISODES : [])}
        />
        <FieldLabel htmlFor="checkbox-select-all">全部剧集</FieldLabel>
        <span className="anibt-num ml-auto text-[12px] text-muted-foreground">
          {picked.length} / {EPISODES.length}
        </span>
      </Field>
      <div className="flex flex-col gap-2.5 px-3 py-3">
        {EPISODES.map((episode, index) => (
          <Field key={episode} orientation="horizontal">
            <Checkbox
              id={`checkbox-select-all-${index}`}
              checked={picked.includes(episode)}
              onCheckedChange={(checked) =>
                setPicked((current) =>
                  checked === true ? [...current, episode] : current.filter((item) => item !== episode)
                )
              }
            />
            <FieldLabel htmlFor={`checkbox-select-all-${index}`} className="anibt-num">
              {episode}
            </FieldLabel>
          </Field>
        ))}
      </div>
    </div>
  )
}