Switch 开关

'use client'

import { useState } from 'react'
import { Stack, Switch, Text } from '@hina-ui/react'

export default function Demo() {
  const [nsfw, setNsfw] = useState(false)

  return (
    <Stack gap="sm">
      <Switch checked={nsfw} onCheckedChange={setNsfw}>
        显示限制级内容
      </Switch>
      <Text size="sm" tone="muted">
        当前值：{String(nsfw)}
      </Text>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Switch } from '@hina-ui/react'

export default function Demo() {
  const [sync, setSync] = useState(true)

  return (
    <Switch
      checked={sync}
      onCheckedChange={setSync}
      description="在其他设备上打开同一部作品时，从上次的位置继续。"
    >
      同步阅读进度
    </Switch>
  )
}

'use client'

import { useState } from 'react'
import { Switch } from '@hina-ui/react'

export default function Demo() {
  const [sync, setSync] = useState(true)

  return (
    <Switch
      checked={sync}
      onCheckedChange={setSync}
      controlPlacement="end"
      block
      description="在其他设备上打开同一部作品时，从上次的位置继续。"
    >
      同步阅读进度
    </Switch>
  )
}

import { Stack, Switch } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="sm">
      <Switch size="sm" checked>
        小号
      </Switch>
      <Switch size="md" checked>
        中号
      </Switch>
      <Switch size="lg" checked>
        大号
      </Switch>
    </Stack>
  )
}

import { Stack, Switch } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack gap="sm">
      <Switch invalid>必须开启才能继续</Switch>
      <Switch disabled>已禁用</Switch>
      <Switch disabled checked>
        已禁用且开启
      </Switch>
    </Stack>
  )
}

'use client'

import { useState } from 'react'
import { Inline, Switch } from '@hina-ui/react'

export default function Demo() {
  const [dark, setDark] = useState(false)

  return (
    <Inline gap="sm">
      <Switch checked={dark} onCheckedChange={setDark} aria-label="深色模式" />
    </Inline>
  )
}

'use client'

import { useState } from 'react'
import * as v from 'valibot'
import { Button, Form, FormField, Input, Switch, Text } from '@hina-ui/react'

const schema = v.pipe(
  v.object({
    isPublic: v.boolean(),
    summary: v.string(),
  }),
  v.forward(
    v.check(input => !input.isPublic || input.summary.trim().length > 0, '公开的作品需要填写简介'),
    ['summary'],
  ),
)

export default function Demo() {
  const [values, setValues] = useState({ isPublic: true, summary: '' })
  const [saved, setSaved] = useState('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    setSaved(JSON.stringify(data))
  }

  return (
    <Form values={values} rules={schema} className="w-80" onSubmit={save}>
      {({ submitting }) => (
        <>
          <FormField name="isPublic">
            <Switch
              checked={values.isPublic}
              onCheckedChange={isPublic => setValues({ ...values, isPublic })}
            >
              公开显示
            </Switch>
          </FormField>
          <FormField name="summary" label="简介">
            <Input
              value={values.summary}
              onValueChange={summary => setValues({ ...values, summary })}
            />
          </FormField>
          <Button type="submit" loading={submitting} className="self-start">
            保存
          </Button>
          {saved && (
            <Text tone="muted" size="sm">
              已保存：{saved}
            </Text>
          )}
        </>
      )}
    </Form>
  )
}