External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-29 16:15:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update front layout

Browse Source
This commit is contained in:
Maël Gangloff
2024-07-27 15:26:24 +02:00
parent df81d12a50
commit 0bdadc3eed
1 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
assets/pages/search/DomainSearchPage.tsx
View File

@@ -1,5 +1,5 @@
import React, {useState} from "react"; import React, {useState} from "react";
import {Badge, Card, Divider, Flex, Form, FormProps, Input, message, Space, Timeline, Typography} from "antd"; import {Badge, Card, Divider, Flex, Form, FormProps, Input, message, Space, Tag, Timeline, Typography} from "antd";
import { import {
ClockCircleOutlined, ClockCircleOutlined,
DeleteOutlined, DeleteOutlined,
@@ -31,7 +31,6 @@ export default function DomainSearchPage() {
}) })
} }
return <Flex gap="middle" align="center" justify="center" vertical> return <Flex gap="middle" align="center" justify="center" vertical>
<Card title="Domain finder"> <Card title="Domain finder">
{contextHolder} {contextHolder}
@@ -60,57 +59,67 @@ export default function DomainSearchPage() {
</Form> </Form>
{ {
domain && <> domain &&
<Divider/> <Space direction="vertical" size="middle" style={{width: '100%'}}>
<Space direction="vertical" size="middle" style={{width: '100%'}}> <Badge.Ribbon text={`.${domain.tld.tld.toUpperCase()} (${domain.tld.type})`}
<Badge.Ribbon text={`.${domain.tld.tld.toUpperCase()} (${domain.tld.type})`} color={
color={ domain.tld.type === 'ccTLD' ? 'purple' :
domain.tld.type === 'ccTLD' ? 'purple' : (domain.tld.type === 'gTLD' && domain.tld.specification13) ? "volcano" :
(domain.tld.type === 'gTLD' && domain.tld.specification13) ? "volcano" : domain.tld.type === 'gTLD' ? "green"
domain.tld.type === 'gTLD' ? "green" : "cyan"
: "cyan" }>
}> <Card title={`${domain.ldhName}${domain.handle ? ' (' + domain.handle + ')' : ''}`}
<Card title={`${domain.ldhName}${domain.handle ? ' (' + domain.handle + ')' : ''}`} size="small">
size="small"> {domain.status.length > 0 &&
<>
<Divider orientation="left">EPP Status Codes</Divider>
<Flex gap="4px 0" wrap>
{
domain.status.map(s =>
<Tag color={s === 'active' ? 'green' : 'blue'}>{s}</Tag>
)
}
</Flex>
</>
}
<Divider orientation="left">Timeline</Divider>
<Timeline
mode="right"
items={domain.events
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
.map(({action, date}) => {
<Timeline let color, dot
mode="right" if (action === 'registration') {
items={domain.events color = 'green'
.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime()) dot = <SignatureOutlined style={{fontSize: '16px'}}/>
.map(({action, date}) => { } else if (action === 'expiration') {
color = 'red'
let color, dot dot = <ClockCircleOutlined style={{fontSize: '16px'}}/>
if (action === 'registration') { } else if (action === 'transfer') {
color = 'green' color = 'orange'
dot = <SignatureOutlined style={{fontSize: '16px'}}/> dot = <ShareAltOutlined style={{fontSize: '16px'}}/>
} else if (action === 'expiration') { } else if (action === 'last changed') {
color = 'red' color = 'blue'
dot = <ClockCircleOutlined style={{fontSize: '16px'}}/> dot = <SyncOutlined style={{fontSize: '16px'}}/>
} else if (action === 'transfer') { } else if (action === 'deletion') {
color = 'orange' color = 'red'
dot = <ShareAltOutlined style={{fontSize: '16px'}}/> dot = <DeleteOutlined style={{fontSize: '16px'}}/>
} else if (action === 'last changed') {
color = 'blue'
dot = <SyncOutlined style={{fontSize: '16px'}}/>
} else if (action === 'deletion') {
color = 'red'
dot = <DeleteOutlined style={{fontSize: '16px'}}/>
}
return {
label: new Date(date).toUTCString(),
children: action,
color,
dot,
pending: new Date(date).getTime() > new Date().getTime()
}
} }
) return {
} label: new Date(date).toUTCString(),
/> children: action,
</Card> color,
</Badge.Ribbon> dot,
</Space> pending: new Date(date).getTime() > new Date().getTime()
</> }
}
)
}
/>
</Card>
</Badge.Ribbon>
</Space>
} }
</Card> </Card>
</Flex> </Flex>