You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.8 KiB
81 lines
1.8 KiB
import React from 'react';
|
|
import { Avatar, Segmented, Space } from 'antd';
|
|
import { UserOutlined } from '@ant-design/icons';
|
|
|
|
const App: React.FC = () => (
|
|
<Space direction="vertical">
|
|
<Segmented
|
|
options={[
|
|
{
|
|
label: (
|
|
<div style={{ padding: 4 }}>
|
|
<Avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel" />
|
|
<div>User 1</div>
|
|
</div>
|
|
),
|
|
value: 'user1',
|
|
},
|
|
{
|
|
label: (
|
|
<div style={{ padding: 4 }}>
|
|
<Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
|
|
<div>User 2</div>
|
|
</div>
|
|
),
|
|
value: 'user2',
|
|
},
|
|
{
|
|
label: (
|
|
<div style={{ padding: 4 }}>
|
|
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
|
|
<div>User 3</div>
|
|
</div>
|
|
),
|
|
value: 'user3',
|
|
},
|
|
]}
|
|
/>
|
|
<Segmented
|
|
options={[
|
|
{
|
|
label: (
|
|
<div style={{ padding: 4 }}>
|
|
<div>Spring</div>
|
|
<div>Jan-Mar</div>
|
|
</div>
|
|
),
|
|
value: 'spring',
|
|
},
|
|
{
|
|
label: (
|
|
<div style={{ padding: 4 }}>
|
|
<div>Summer</div>
|
|
<div>Apr-Jun</div>
|
|
</div>
|
|
),
|
|
value: 'summer',
|
|
},
|
|
{
|
|
label: (
|
|
<div style={{ padding: 4 }}>
|
|
<div>Autumn</div>
|
|
<div>Jul-Sept</div>
|
|
</div>
|
|
),
|
|
value: 'autumn',
|
|
},
|
|
{
|
|
label: (
|
|
<div style={{ padding: 4 }}>
|
|
<div>Winter</div>
|
|
<div>Oct-Dec</div>
|
|
</div>
|
|
),
|
|
value: 'winter',
|
|
},
|
|
]}
|
|
/>
|
|
</Space>
|
|
);
|
|
|
|
export default App;
|
|
|