import React, { useState } from 'react'; import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'; import { Avatar, Card, Flex, Switch } from 'antd'; const actions: React.ReactNode[] = [ <EditOutlined key="edit" />, <SettingOutlined key="setting" />, <EllipsisOutlined key="ellipsis" />, ]; const App: React.FC = () => { const [loading, setLoading] = useState<boolean>(true); return ( <Flex gap="middle" align="start" vertical> <Switch checked={!loading} onChange={(checked) => setLoading(!checked)} /> <Card loading={loading} actions={actions} style={{ minWidth: 300 }}> <Card.Meta avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />} title="Card title" description={ <> <p>This is the description</p> <p>This is the description</p> </> } /> </Card> <Card loading={loading} actions={actions} style={{ minWidth: 300 }}> <Card.Meta avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />} title="Card title" description={ <> <p>This is the description</p> <p>This is the description</p> </> } /> </Card> </Flex> ); }; export default App;