Affix 吸附

'use client'

import { useState } from 'react'
import {
  Affix,
  Button,
  Card,
  FormField,
  Heading,
  Inline,
  Input,
  ScrollArea,
  Stack,
  Text,
  Textarea,
} from '@hina-ui/react'

export default function Demo() {
  const [draft, setDraft] = useState({
    title: '组件设计回顾',
    author: '设计团队',
    summary: '',
    notes: '',
  })
  const [saved, setSaved] = useState(false)
  const update = (patch: Partial<typeof draft>) => {
    setDraft(draft => ({ ...draft, ...patch }))
    setSaved(false)
  }
  return (
    <Card padded={false} className="w-full max-w-xl">
      <ScrollArea className="h-96" shadow={false} focusable label="编辑文章">
        <Stack className="p-4" gap="lg">
          <Heading level={3} size="base">
            编辑文章
          </Heading>
          <FormField label="标题">
            <Input value={draft.title} onValueChange={title => update({ title })} />
          </FormField>
          <FormField label="作者">
            <Input value={draft.author} onValueChange={author => update({ author })} />
          </FormField>
          <FormField label="摘要" description="在列表中展示的一段简短介绍。">
            <Textarea
              value={draft.summary}
              onValueChange={summary => update({ summary })}
              rows={4}
              placeholder="这一篇主要讨论什么？"
            />
          </FormField>
          <FormField label="编辑备注" description="为下一位编辑保留上下文。">
            <Textarea
              value={draft.notes}
              onValueChange={notes => update({ notes })}
              rows={4}
              placeholder="补充修改原因或待确认事项"
            />
          </FormField>
          <Affix position="bottom" offset={12}>
            <Card className="p-3">
              <Inline align="center" justify="between" gap="sm" wrap>
                <Text role="status" size="sm" tone="muted">
                  {saved ? '草稿已保存在当前示例' : '修改仅保留在当前示例'}
                </Text>
                <Button
                  size="sm"
                  disabled={!draft.title.trim() || saved}
                  onClick={() => setSaved(true)}
                >
                  保存草稿
                </Button>
              </Inline>
            </Card>
          </Affix>
        </Stack>
      </ScrollArea>
    </Card>
  )
}

import { Affix, Card, Heading, ScrollArea, Stack, Text } from '@hina-ui/react'
import { affixChecklist } from '../../affix'

const items = affixChecklist('zh-CN')
const groups = [
  { title: '设计与内容', items: items.slice(0, 3) },
  { title: '运行与适配', items: items.slice(3) },
]

export default function Demo() {
  return (
    <Stack className="w-full max-w-xl" gap="sm">
      <Text size="sm" tone="muted">
        每组标题只留在自己的区域内。滚到下一组时，上一组标题会一起离开。
      </Text>
      <Card padded={false}>
        <ScrollArea className="h-72" shadow={false} focusable label="分组检查说明">
          <Stack gap="none">
            {groups.map(group => (
              <Stack key={group.title} gap="none">
                <Affix>
                  <Heading
                    level={3}
                    size="sm"
                    className="bg-surface border-line border-b px-4 py-3"
                  >
                    {group.title}
                  </Heading>
                </Affix>
                {group.items.map(item => (
                  <Stack key={item.title} className="p-4" gap="sm">
                    <Text size="sm" weight="medium">
                      {item.title}
                    </Text>
                    <Text size="sm" tone="muted">
                      {item.description}
                    </Text>
                  </Stack>
                ))}
              </Stack>
            ))}
          </Stack>
        </ScrollArea>
      </Card>
    </Stack>
  )
}