|
|
|
import React from 'react';
|
|
|
|
import { Tabs } from 'antd';
|
|
|
|
import type { TabsProps } from 'antd';
|
|
|
|
import { Select, Space, Table, Progress } from 'antd';
|
|
|
|
|
|
|
|
const onChange = (key: string) => {
|
|
|
|
console.log(key);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleChangeAge = (value: string) => {
|
|
|
|
console.log(`selected ${value}`);
|
|
|
|
};
|
|
|
|
|
|
|
|
function createData(
|
|
|
|
name: string,
|
|
|
|
calories: number,
|
|
|
|
fat: number,
|
|
|
|
carbs: number,
|
|
|
|
protein: number,
|
|
|
|
) {
|
|
|
|
return { name, calories, fat, carbs, protein };
|
|
|
|
}
|
|
|
|
|
|
|
|
const rows = [
|
|
|
|
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
|
|
|
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
|
|
|
createData('Eclair', 262, 16.0, 24, 6.0),
|
|
|
|
createData('Cupcake', 305, 3.7, 67, 4.3),
|
|
|
|
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
|
|
|
];
|
|
|
|
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Dessert (100g serving)',
|
|
|
|
dataIndex: 'name',
|
|
|
|
key: 'name',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Calories',
|
|
|
|
dataIndex: 'calories',
|
|
|
|
key: 'calories',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Fat (g)',
|
|
|
|
dataIndex: 'fat',
|
|
|
|
key: 'fat',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Carbs (g)',
|
|
|
|
dataIndex: 'carbs',
|
|
|
|
key: 'carbs',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Protein (g)',
|
|
|
|
dataIndex: 'protein',
|
|
|
|
key: 'protein',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const items: TabsProps['items'] = [
|
|
|
|
{
|
|
|
|
key: '1',
|
|
|
|
label: `Item One`,
|
|
|
|
children: (
|
|
|
|
<Space wrap>
|
|
|
|
<Select
|
|
|
|
defaultValue="10"
|
|
|
|
style={{ width: 120 }}
|
|
|
|
onChange={handleChangeAge}
|
|
|
|
options={[
|
|
|
|
{ value: '10', label: 'Ten' },
|
|
|
|
{ value: '20', label: 'Twenty' },
|
|
|
|
{ value: '30', label: 'Thirty' },
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
</Space>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '2',
|
|
|
|
label: `Item Two`,
|
|
|
|
children: (
|
|
|
|
<Table dataSource={rows} columns={columns} />
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: '3',
|
|
|
|
label: `Item Three`,
|
|
|
|
children: (
|
|
|
|
<Space wrap>
|
|
|
|
<Progress type="circle" percent={75} />
|
|
|
|
</Space>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
export default function Home() {
|
|
|
|
return (
|
|
|
|
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
|
|
|
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
|
|
|
|
</main>
|
|
|
|
)
|
|
|
|
}
|