-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add: BAILayoutCard and apply to dashboard in draft
- Loading branch information
Showing
4 changed files
with
271 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import Flex from './Flex'; | ||
import { Card, CardProps, ConfigProvider, theme, Typography } from 'antd'; | ||
|
||
export interface BAILayoutCardProps extends CardProps {} | ||
|
||
const BAILayoutCard: React.FC<BAILayoutCardProps> = ({ ...cardProps }) => { | ||
const { token } = theme.useToken(); | ||
|
||
return ( | ||
<ConfigProvider | ||
theme={{ | ||
components: { | ||
Card: { | ||
lineWidth: 0, | ||
extraColor: '#00BD9B', | ||
}, | ||
}, | ||
}} | ||
> | ||
<Card {...cardProps}></Card> | ||
</ConfigProvider> | ||
); | ||
}; | ||
|
||
export default BAILayoutCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import BAILayoutCard from '../components/BAILayoutCard'; | ||
import Flex from '../components/Flex'; | ||
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons'; | ||
import { Button, ConfigProvider, Typography } from 'antd'; | ||
import React from 'react'; | ||
|
||
interface AdminDashboardPageProps {} | ||
|
||
const AdminDashboardPage: React.FC<AdminDashboardPageProps> = (props) => { | ||
return ( | ||
<> | ||
<ConfigProvider | ||
theme={{ | ||
components: { | ||
Button: { | ||
fontSize: 24, // icon size | ||
onlyIconSize: 20, | ||
colorText: '#999', | ||
}, | ||
}, | ||
}} | ||
> | ||
<Flex direction="column" align="start" justify="start" gap={'lg'}> | ||
<Flex direction="row" align="center" justify="around" gap={'lg'}> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Allocated Resources & Capacity'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 1146, height: 192 }} | ||
></BAILayoutCard> | ||
</Flex> | ||
<Flex direction="column" align="center" justify="around" gap={'lg'}> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Resource Allocated Session'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 1146, height: 329 }} | ||
></BAILayoutCard> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Recently Created Session'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 1146, height: 329 }} | ||
></BAILayoutCard> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Session(s) in Error'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 1146, height: 329 }} | ||
></BAILayoutCard> | ||
</Flex> | ||
</Flex> | ||
</ConfigProvider> | ||
</> | ||
); | ||
}; | ||
|
||
export default AdminDashboardPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
import BAILayoutCard from '../components/BAILayoutCard'; | ||
import Flex from '../components/Flex'; | ||
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons'; | ||
import { Button, ConfigProvider, Typography } from 'antd'; | ||
import React from 'react'; | ||
|
||
interface DashboardPageProps {} | ||
|
||
const DashboardPage: React.FC<DashboardPageProps> = (props) => { | ||
return ( | ||
<> | ||
<ConfigProvider | ||
theme={{ | ||
components: { | ||
Button: { | ||
fontSize: 24, // icon size | ||
onlyIconSize: 20, | ||
colorText: '#999', | ||
}, | ||
}, | ||
}} | ||
> | ||
<Flex direction="column" align="start" justify="start" gap={'lg'}> | ||
<Flex direction="row" align="center" justify="around" gap={'lg'}> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'My Session'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 444, height: 192 }} | ||
></BAILayoutCard> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Allocated Resources'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 678, height: 192 }} | ||
></BAILayoutCard> | ||
</Flex> | ||
<Flex direction="column" align="center" justify="around" gap={'lg'}> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Recently Created Session'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 1146, height: 329 }} | ||
></BAILayoutCard> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Most Resource allocated Sessions'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 1146, height: 329 }} | ||
></BAILayoutCard> | ||
<BAILayoutCard | ||
title={ | ||
<Flex direction="row" align="center" justify="start" gap={'xs'}> | ||
<Typography.Title level={4} style={{ margin: 0 }}> | ||
{'Pipeline Status'} | ||
</Typography.Title> | ||
<Button type="text" icon={<QuestionCircleOutlined />} /> | ||
</Flex> | ||
} | ||
extra={ | ||
<Button | ||
type="text" | ||
icon={<SyncOutlined />} | ||
style={{ color: 'inherit' }} | ||
/> | ||
} | ||
style={{ width: 1146, height: 329 }} | ||
></BAILayoutCard> | ||
</Flex> | ||
</Flex> | ||
</ConfigProvider> | ||
</> | ||
); | ||
}; | ||
|
||
export default DashboardPage; |