Card 卡片组件 #

import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Heading,
  Text,
  Button,
} from '@chakra-ui/react'

function Example() {
  return (
    <Card>
      <CardHeader>
        <Heading size="md">卡片标题</Heading>
      </CardHeader>
      <CardBody>
        <Text>卡片内容描述文字</Text>
      </CardBody>
      <CardFooter>
        <Button colorScheme="blue">查看详情</Button>
      </CardFooter>
    </Card>
  )
}

<Card variant="elevated">悬浮卡片</Card>
<Card variant="outline">轮廓卡片</Card>
<Card variant="filled">填充卡片</Card>

<Card size="sm">小卡片</Card>
<Card size="md">中等卡片</Card>
<Card size="lg">大卡片</Card>

<Card direction={{ base: 'column', sm: 'row' }}>
  <Image src="image.jpg" alt="图片" />
  <CardBody>
    <Text>卡片内容</Text>
  </CardBody>
</Card>

function ProductCard({ product }) {
  return (
    <Card maxW="sm">
      <CardBody>
        <Image
          src={product.image}
          alt={product.name}
          borderRadius="lg"
        />
        <Heading size="md" mt={4}>{product.name}</Heading>
        <Text color="gray.500" mt={2}>{product.description}</Text>
        <Text color="blue.600" fontSize="2xl" fontWeight="bold" mt={4}>
          ¥{product.price}
        </Text>
      </CardBody>
      <Divider />
      <CardFooter>
        <ButtonGroup spacing={2}>
          <Button variant="solid" colorScheme="blue">
            加入购物车
          </Button>
          <Button variant="ghost" colorScheme="blue">
            收藏
          </Button>
        </ButtonGroup>
      </CardFooter>
    </Card>
  )
}

function UserCard({ user }) {
  return (
    <Card>
      <CardBody>
        <HStack spacing={4}>
          <Avatar src={user.avatar} size="lg" />
          <Box>
            <Heading size="sm">{user.name}</Heading>
            <Text color="gray.500">{user.role}</Text>
            <HStack mt={2}>
              <Badge colorScheme="green">{user.status}</Badge>
              <Badge colorScheme="blue">{user.department}</Badge>
            </HStack>
          </Box>
        </HStack>
      </CardBody>
    </Card>
  )
}

function StatCard({ title, value, change, icon }) {
  return (
    <Card>
      <CardBody>
        <HStack justify="space-between">
          <Box>
            <Text color="gray.500" fontSize="sm">{title}</Text>
            <Text fontSize="2xl" fontWeight="bold">{value}</Text>
            <HStack mt={2}>
              <Icon as={change > 0 ? ArrowUpIcon : ArrowDownIcon} 
                    color={change > 0 ? 'green.500' : 'red.500'} />
              <Text color={change > 0 ? 'green.500' : 'red.500'} fontSize="sm">
                {Math.abs(change)}%
              </Text>
            </HStack>
          </Box>
          <Icon as={icon} boxSize={10} color="blue.500" />
        </HStack>
      </CardBody>
    </Card>
  )
}