QRCode 二维码

'use client'

import { useState } from 'react'
import {
  FormField,
  Inline,
  QRCode,
  SegmentedControl,
  Slider,
  Stack,
  Switch,
  Text,
  type QRCodeLevel,
} from '@hina-ui/react'

const levels = ['L', 'M', 'Q', 'H'].map(value => ({ value, label: value }))

export default function Demo() {
  const [size, setSize] = useState<number | undefined>(192)
  const [logo, setLogo] = useState(true)
  const [brand, setBrand] = useState(false)
  const [level, setLevel] = useState<QRCodeLevel>('H')

  return (
    <Stack align="center" className="w-full max-w-sm" data-demo-qr-appearance="">
      <QRCode
        value="https://hinaui.dev"
        size={size}
        level={level}
        logo={logo ? '/favicon.png' : undefined}
        color={brand ? 'var(--color-brand-800)' : undefined}
      />
      <Stack className="w-full">
        <FormField label="尺寸">
          <Inline wrap={false} gap="sm">
            <Slider
              value={size}
              onValueChange={setSize}
              min={128}
              max={256}
              step={8}
              className="flex-1"
            />
            <Text size="sm" tone="muted" className="w-14 shrink-0 tabular-nums">
              {size}px
            </Text>
          </Inline>
        </FormField>
        <FormField label="纠错等级">
          <SegmentedControl
            value={level}
            onValueChange={value => setLevel(value as QRCodeLevel)}
            options={levels}
            block
          />
        </FormField>
        <Inline justify="between">
          <Switch checked={logo} onCheckedChange={setLogo}>
            中心标志
          </Switch>
          <Switch checked={brand} onCheckedChange={setBrand}>
            品牌色
          </Switch>
        </Inline>
      </Stack>
    </Stack>
  )
}

'use client'

import { useEffect, useRef, useState } from 'react'
import { QRCode, Select, Stack, Text, type QRCodeStatus } from '@hina-ui/react'

const options = [
  { value: 'active', label: '可扫描' },
  { value: 'loading', label: '加载中' },
  { value: 'expired', label: '已过期' },
  { value: 'scanned', label: '已扫描' },
]

export default function Demo() {
  const [status, setStatus] = useState<QRCodeStatus>('expired')
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)

  function refresh() {
    clearTimeout(timer.current)
    setStatus('loading')
    timer.current = setTimeout(() => {
      setStatus('active')
    }, 800)
  }

  function change(value: unknown) {
    clearTimeout(timer.current)
    setStatus(value as QRCodeStatus)
  }

  useEffect(() => () => clearTimeout(timer.current), [])

  return (
    <Stack align="center" className="w-full max-w-sm" data-demo-qr-status="">
      <QRCode value="https://hinaui.dev" status={status} onRefresh={refresh} />
      <Select
        value={status}
        options={options}
        aria-label="二维码状态"
        className="w-48"
        onValueChange={change}
      />
      <Text size="sm" tone="muted" className="text-center">
        刷新在这里模拟一次异步请求，状态由调用方控制。
      </Text>
    </Stack>
  )
}

'use client'

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

export default function Demo() {
  const [expired, setExpired] = useState(true)

  return (
    <Stack align="center" data-demo-qr-custom="">
      <QRCode
        value="https://hinaui.dev"
        status={expired ? 'expired' : 'active'}
        size={224}
        onRefresh={() => setExpired(false)}
        renderStatus={({ refresh }) => (
          <>
            <Text weight="medium">分享链接已过期</Text>
            <Text size="xs" tone="muted">
              重新生成后再扫码打开
            </Text>
            <Button size="sm" variant="outline" onClick={refresh}>
              重新生成
            </Button>
          </>
        )}
      />
      <Button variant="ghost" size="sm" disabled={expired} onClick={() => setExpired(true)}>
        模拟过期
      </Button>
    </Stack>
  )
}

'use client'

import { useEffect, useRef, useState } from 'react'
import { Download } from 'lucide-react'
import { Button, Inline, QRCode, Stack, Text, type QRCodeExpose } from '@hina-ui/react'

export default function Demo() {
  const code = useRef<QRCodeExpose>(null)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState(false)
  const urls = useRef(new Set<string>())

  async function save(type: 'image/png' | 'image/svg+xml') {
    if (!code.current || busy) return
    setBusy(true)
    setError(false)
    try {
      const blob = await code.current.toBlob({ type, scale: 3 })
      const url = URL.createObjectURL(blob)
      urls.current.add(url)
      const link = document.createElement('a')
      link.href = url
      link.download = type === 'image/png' ? 'hina-ui.png' : 'hina-ui.svg'
      link.click()
      setTimeout(() => {
        URL.revokeObjectURL(url)
        urls.current.delete(url)
      }, 1000)
    } catch {
      setError(true)
    } finally {
      setBusy(false)
    }
  }

  useEffect(() => {
    const pending = urls.current
    return () => pending.forEach(url => URL.revokeObjectURL(url))
  }, [])

  return (
    <Stack align="center" data-demo-qr-export="">
      <QRCode ref={code} value="https://hinaui.dev" logo="/favicon.png" label="Hina UI 文档站" />
      <Inline gap="sm">
        <Button
          variant="outline"
          size="sm"
          disabled={busy}
          onClick={() => save('image/png')}
          icon={<Download />}
        >
          PNG
        </Button>
        <Button
          variant="outline"
          size="sm"
          disabled={busy}
          onClick={() => save('image/svg+xml')}
          icon={<Download />}
        >
          SVG
        </Button>
      </Inline>
      {error && (
        <Text tone="danger" size="sm" role="alert">
          导出失败，请重试。
        </Text>
      )}
    </Stack>
  )
}