import React from 'react'; import { DownloadOutlined, EllipsisOutlined, HeartOutlined, LikeOutlined, CommentOutlined, StarOutlined, ShareAltOutlined, WarningOutlined, MailOutlined, MobileOutlined, } from '@ant-design/icons'; import { Button, Menu, Dropdown, Space, Tooltip } from 'antd'; const App: React.FC = () => ( <div> <Space.Compact block> <Tooltip title="Like"> <Button icon={<LikeOutlined />} /> </Tooltip> <Tooltip title="Comment"> <Button icon={<CommentOutlined />} /> </Tooltip> <Tooltip title="Star"> <Button icon={<StarOutlined />} /> </Tooltip> <Tooltip title="Heart"> <Button icon={<HeartOutlined />} /> </Tooltip> <Tooltip title="Share"> <Button icon={<ShareAltOutlined />} /> </Tooltip> <Tooltip title="Download"> <Button icon={<DownloadOutlined />} /> </Tooltip> <Dropdown placement="bottomRight" overlay={ <Menu items={[ { key: '1', label: 'Report', icon: <WarningOutlined />, }, { key: '2', label: 'Mail', icon: <MailOutlined />, }, { key: '3', label: 'Mobile', icon: <MobileOutlined />, }, ]} /> } trigger={['click']} > <Button icon={<EllipsisOutlined />} /> </Dropdown> </Space.Compact> <br /> <Space.Compact block> <Button type="primary">Button 1</Button> <Button type="primary">Button 2</Button> <Button type="primary">Button 3</Button> <Button type="primary">Button 4</Button> <Tooltip title="Tooltip"> <Button type="primary" icon={<DownloadOutlined />} disabled /> </Tooltip> <Tooltip title="Tooltip"> <Button type="primary" icon={<DownloadOutlined />} /> </Tooltip> </Space.Compact> <br /> <Space.Compact block> <Button>Button 1</Button> <Button>Button 2</Button> <Button>Button 3</Button> <Tooltip title="Tooltip"> <Button icon={<DownloadOutlined />} disabled /> </Tooltip> <Tooltip title="Tooltip"> <Button icon={<DownloadOutlined />} /> </Tooltip> <Button type="primary">Button 4</Button> <Dropdown placement="bottomRight" overlay={ <Menu items={[ { key: '1', label: '1st item', }, { key: '2', label: '2nd item', }, { key: '3', label: '3rd item', }, ]} /> } trigger={['click']} > <Button type="primary" icon={<EllipsisOutlined />} /> </Dropdown> </Space.Compact> </div> ); export default App;