src/demos/FeedbackDemo.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { Banner } from '@astryxdesign/core/Banner'
import { HStack } from '@astryxdesign/core/HStack'
import { ProgressBar } from '@astryxdesign/core/ProgressBar'
import { Skeleton } from '@astryxdesign/core/Skeleton'
import { Spinner } from '@astryxdesign/core/Spinner'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'

export function FeedbackDemo() {
  return (
    <VStack gap={4}>
      <Banner
        status="info"
        title="新版本已经准备好"
        description="刷新页面后即可使用最新的组件与主题。"
      />
      <VStack gap={2}>
        <Text type="label">工作区初始化</Text>
        <ProgressBar label="工作区初始化" value={68} hasValueLabel isLabelHidden />
      </VStack>
      <HStack gap={4} vAlign="center" wrap="wrap">
        <HStack gap={2} vAlign="center">
          <Spinner size="sm" />
          <Text type="supporting" size="sm">
            正在同步数据…
          </Text>
        </HStack>
        <VStack gap={1} width={160}>
          <Skeleton width="100%" height={14} index={0} />
          <Skeleton width="70%" height={14} index={1} />
        </VStack>
      </HStack>
    </VStack>
  )
}