order book

要用 React 和 Chakra UI 实现一个类似的订单簿界面，你可以按照以下步骤进行：

1. 安装 Chakra UI: 首先确保你已经在项目中安装了 Chakra UI。

   npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. 创建 OrderBook 组件: 下面是一个简单的实现示例：

   import React from 'react';
   import { Box, Text, Flex, Stack } from '@chakra-ui/react';
   
   const OrderBook = ({ orders }) => {
     return (
       <Box bg="gray.800" p={4} borderRadius="md" boxShadow="lg">
         <Text fontSize="lg" color="white" mb={4}>Order Book</Text>
         <Flex justify="space-between" mb={2}>
           <Text color="gray.400">Price (USDT)</Text>
           <Text color="gray.400">Amount (XRP)</Text>
           <Text color="gray.400">Total</Text>
         </Flex>
         <Stack spacing={1}>
           {orders.map((order, index) => (
             <Flex
               key={index}
               justify="space-between"
               bg={order.type === 'buy' ? 'green.900' : 'red.900'}
               p={2}
               borderRadius="md"
             >
               <Text color={order.type === 'buy' ? 'green.400' : 'red.400'}>
                 {order.price}
               </Text>
               <Text color="white">{order.amount}</Text>
               <Text color="white">{order.total}</Text>
             </Flex>
           ))}
         </Stack>
       </Box>
     );
   };
   
   export default OrderBook;

3. 使用 OrderBook 组件: 在你的主应用中使用这个组件，并传入订单数据。

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { ChakraProvider } from '@chakra-ui/react';
   import OrderBook from './OrderBook';
   
   const orders = [
     { price: '2.3815', amount: '14.16K', total: '33.72K', type: 'sell' },
     { price: '2.3802', amount: '642', total: '1.53K', type: 'buy' },
     // 添加更多订单数据
   ];
   
   const App = () => (
     <ChakraProvider>
       <OrderBook orders={orders} />
     </ChakraProvider>
   );
   
   ReactDOM.render(<App />, document.getElementById('root'));

4. 自定义样式: 根据需要，使用 Chakra UI 的样式系统自定义颜色、间距等。

这样，你就可以使用 React 和 Chakra UI 实现一个简单的订单簿界面。根据需要，进一步调整样式和功能。