#Loading 加载

import { Loading } from '@ifhover/leaf-ui';

export function LoadingBasic() {
  return <Loading tip="正在加载" />;
}

import { Flex, Loading, Text } from '@ifhover/leaf-ui';

export function LoadingSizes() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Flex direction="column" gap="sm" align="start">
        <Text>小尺寸</Text>
        <Loading size="sm" />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>默认尺寸</Text>
        <Loading />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>大尺寸</Text>
        <Loading size="lg" />
      </Flex>
    </Flex>
  );
}

import { Button, Card, Loading, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function LoadingOverlay() {
  const [spinning, setSpinning] = useState(true);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setSpinning(!spinning)}>
        {spinning ? '结束加载' : '开始加载'}
      </Button>
      <Loading spinning={spinning} tip="正在读取项目" delay={200}>
        <Card>
          <strong>Leaf Garden</strong>
          <p>在此查看项目概览和最近更新。</p>
          <Button variant="outline">编辑项目</Button>
        </Card>
      </Loading>
    </Space>
  );
}