Toggle Switch方条开关

"use client"

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

import { ToggleSwitch } from "@/components/ui/toggle-switch/toggle-switch"

/** 四个通知渠道：名称、右侧的送达方式、色调与初始状态都固定 */
const CHANNELS = [
  { id: "reply", label: "评论回复", description: "邮件", tone: "blue" },
  { id: "mention", label: "被提及", description: "桌面", tone: "violet" },
  { id: "digest", label: "每周摘要", description: "邮件", tone: "amber" },
  { id: "push", label: "移动端推送", description: "手机", tone: "rose" },
] as const

type ChannelId = (typeof CHANNELS)[number]["id"]

const INITIAL: Record<ChannelId, boolean> = {
  reply: true,
  mention: true,
  digest: false,
  push: false,
}

/**
 * 默认示例：通知设置卡。每条是一个整条可点的开关，打开时整条铺上淡色、竖线手柄滑到右端，
 * 四个渠道各用一种色调；`description` 在标签右侧标出送达方式。
 */
export default function ToggleSwitchDemo() {
  const [enabled, setEnabled] = React.useState(INITIAL)
  const count = CHANNELS.filter((channel) => enabled[channel.id]).length

  return (
    <div className="w-full max-w-sm rounded-xl border border-edge bg-background p-4 shadow-xs">
      <div className="flex items-baseline justify-between gap-2 pb-3">
        <div className="min-w-0">
          <p className="text-sm font-medium">通知</p>
          <p className="truncate text-xs text-muted-foreground">
            选择想收到提醒的渠道
          </p>
        </div>
        <p className="shrink-0 font-mono text-[11px] text-muted-foreground">
          {count} / {CHANNELS.length}
        </p>
      </div>
      <div className="flex flex-col gap-2">
        {CHANNELS.map((channel) => (
          <ToggleSwitch
            key={channel.id}
            label={channel.label}
            description={channel.description}
            tone={channel.tone}
            checked={enabled[channel.id]}
            onCheckedChange={(checked) =>
              setEnabled((current) => ({ ...current, [channel.id]: checked }))
            }
          />
        ))}
      </div>
      <p className="mt-3 flex items-center gap-1.5 text-[11px] text-muted-foreground">
        <Bell className="size-3" aria-hidden="true" />
        关闭的渠道只会写进站内消息
      </p>
    </div>
  )
}

"use client"

import * as React from "react"

import { ToggleSwitch } from "@/components/ui/toggle-switch/toggle-switch"

/** 编辑器偏好：六条挤在一张卡里，用 compact 档排成密排 */
const PREFERENCES = [
  { id: "autosave", label: "自动保存", checked: true },
  { id: "numbers", label: "显示行号", checked: true },
  { id: "wrap", label: "自动换行", checked: false },
  { id: "highlight", label: "高亮当前行", checked: true },
  { id: "spaces", label: "显示空白字符", checked: false },
  { id: "vim", label: "Vim 键位", checked: false },
] as const

type PreferenceId = (typeof PREFERENCES)[number]["id"]

const INITIAL = Object.fromEntries(
  PREFERENCES.map((item) => [item.id, item.checked]),
) as Record<PreferenceId, boolean>

/**
 * 密排示例：`variant="compact"`把方条收到 22px 高，六条加上 `gap-1` 也只占半张卡，
 * 适合放进设置页或侧栏。密排时不带 `description`，一行只有一个标签，视线不会被切断。
 */
export default function ToggleSwitchCompactDemo() {
  const [values, setValues] = React.useState(INITIAL)

  return (
    <div className="w-full max-w-xs rounded-xl border border-edge bg-background p-3 shadow-xs">
      <p className="px-1 pb-2 text-xs font-medium text-muted-foreground">
        编辑器偏好
      </p>
      <div className="flex flex-col gap-1">
        {PREFERENCES.map((item) => (
          <ToggleSwitch
            key={item.id}
            variant="compact"
            label={item.label}
            checked={values[item.id]}
            onCheckedChange={(checked) =>
              setValues((current) => ({ ...current, [item.id]: checked }))
            }
          />
        ))}
      </div>
    </div>
  )
}

"use client"

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

import { ToggleSwitch } from "@/components/ui/toggle-switch/toggle-switch"

// 从属项：总开关关着时它们都不可点
const DEPENDENTS = [
  { id: "theme", label: "主题偏好", checked: true },
  { id: "shortcuts", label: "快捷键方案", checked: true },
  { id: "tabs", label: "打开的标签页", checked: false },
] as const

type DependentId = (typeof DEPENDENTS)[number]["id"]

const INITIAL = Object.fromEntries(
  DEPENDENTS.map((item) => [item.id, item.checked]),
) as Record<DependentId, boolean>

/**
 * 禁用态示例：总开关关着时，下面的 `disabled` 项整条淡一半、也不响应点击与键盘；
 * 打开总开关，三项立刻可以操作。`description` 在同一个位置换成状态文案，说明为什么点不动。
 */
export default function ToggleSwitchDisabledDemo() {
  const [sync, setSync] = React.useState(false)
  const [values, setValues] = React.useState(INITIAL)

  return (
    <div className="w-full max-w-sm rounded-xl border border-edge bg-background p-4 shadow-xs">
      <div className="flex items-baseline justify-between gap-2 pb-3">
        <p className="text-sm font-medium">云同步</p>
        <p className="text-xs text-muted-foreground">
          {sync ? "已开启" : "已关闭"}
        </p>
      </div>
      <ToggleSwitch
        label="同步到云端"
        description={sync ? "3 项正在同步" : "未上传"}
        tone="blue"
        checked={sync}
        onCheckedChange={setSync}
      />
      <div className="mt-2 flex flex-col gap-1.5 border-s border-edge ps-3">
        {DEPENDENTS.map((item) => (
          <ToggleSwitch
            key={item.id}
            variant="compact"
            label={item.label}
            description={sync ? undefined : "需开启同步"}
            disabled={!sync}
            checked={values[item.id]}
            onCheckedChange={(checked) =>
              setValues((current) => ({ ...current, [item.id]: checked }))
            }
          />
        ))}
      </div>
      <p className="mt-3 flex items-center gap-1.5 text-[11px] text-muted-foreground">
        <Lock className="size-3 shrink-0" aria-hidden="true" />
        同步关闭时这三项保留上次的选择
      </p>
    </div>
  )
}