mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-22 12:15:32 +00:00
feat: refactor tld page
This commit is contained in:
Maël Gangloff
parent
b2db185e77
commit
c552c865ab
@ -1,15 +1,15 @@
|
|||||||
import type {ReactElement} from 'react'
|
import type {ReactElement} from 'react'
|
||||||
import React, {useEffect, useState} from 'react'
|
import React, {useEffect, useState} from 'react'
|
||||||
import {Collapse, Divider, Table, Typography} from 'antd'
|
import {Card, Divider, Table, Typography} from 'antd'
|
||||||
import type {Tld} from '../../utils/api'
|
import type {Tld} from '../../utils/api'
|
||||||
import {getTldList} from '../../utils/api'
|
import {getTldList} from '../../utils/api'
|
||||||
import {t} from 'ttag'
|
import {t} from 'ttag'
|
||||||
import {regionNames} from '../../i18n'
|
import {regionNames} from '../../i18n'
|
||||||
import useBreakpoint from '../../hooks/useBreakpoint'
|
|
||||||
import type {ColumnType} from 'antd/es/table'
|
import type {ColumnType} from 'antd/es/table'
|
||||||
import punycode from 'punycode/punycode'
|
import punycode from 'punycode/punycode'
|
||||||
import {getCountryCode} from '../../utils/functions/getCountryCode'
|
import {getCountryCode} from '../../utils/functions/getCountryCode'
|
||||||
import {tldToEmoji} from '../../utils/functions/tldToEmoji'
|
import {tldToEmoji} from '../../utils/functions/tldToEmoji'
|
||||||
|
import {BankOutlined, FlagOutlined, GlobalOutlined, TrademarkOutlined} from "@ant-design/icons"
|
||||||
|
|
||||||
const {Text, Paragraph} = Typography
|
const {Text, Paragraph} = Typography
|
||||||
|
|
||||||
@ -29,7 +29,6 @@ function TldTable(filters: FiltersType) {
|
|||||||
Country?: string
|
Country?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const sm = useBreakpoint('sm')
|
|
||||||
const [dataTable, setDataTable] = useState<TableRow[]>([])
|
const [dataTable, setDataTable] = useState<TableRow[]>([])
|
||||||
const [total, setTotal] = useState(0)
|
const [total, setTotal] = useState(0)
|
||||||
|
|
||||||
@ -111,13 +110,36 @@ function TldTable(filters: FiltersType) {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
||||||
{...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
|
scroll={{y: '50vh'}}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TldPage() {
|
export default function TldPage() {
|
||||||
const sm = useBreakpoint('sm')
|
const [activeTabKey, setActiveTabKey] = useState<string>('gTLD')
|
||||||
|
|
||||||
|
const contentList: Record<string, React.ReactNode> = {
|
||||||
|
sTLD: <>
|
||||||
|
<Text>{t`Top-level domains sponsored by specific organizations that set rules for registration and use, often related to particular interest groups or industries.`}</Text>
|
||||||
|
<Divider/>
|
||||||
|
<TldTable type='sTLD'/>
|
||||||
|
</>,
|
||||||
|
gTLD: <>
|
||||||
|
<Text>{t`Generic top-level domains open to everyone, not restricted by specific criteria, representing various themes or industries.`}</Text>
|
||||||
|
<Divider/>
|
||||||
|
<TldTable type='gTLD' contractTerminated={false} specification13={false}/>
|
||||||
|
</>,
|
||||||
|
ngTLD: <>
|
||||||
|
<Text>{t`Generic top-level domains associated with specific brands, allowing companies to use their own brand names as domains.`}</Text>
|
||||||
|
<Divider/>
|
||||||
|
<TldTable type='gTLD' contractTerminated={false} specification13/>
|
||||||
|
</>,
|
||||||
|
ccTLD: <>
|
||||||
|
<Text>{t`Top-level domains based on country codes, identifying websites according to their country of origin.`}</Text>
|
||||||
|
<Divider/>
|
||||||
|
<TldTable type='ccTLD'/>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -131,47 +153,41 @@ export default function TldPage() {
|
|||||||
At the same time, the list of root RDAP servers is updated.`}
|
At the same time, the list of root RDAP servers is updated.`}
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
<Divider/>
|
<Divider/>
|
||||||
<Collapse
|
|
||||||
accordion
|
<Card
|
||||||
size={sm ? 'small' : 'large'}
|
style={{width: '100%'}}
|
||||||
items={[
|
tabProps={{
|
||||||
{
|
size: 'middle',
|
||||||
key: 'sTLD',
|
}}
|
||||||
label: t`Sponsored Top-Level-Domains`,
|
tabList={[
|
||||||
children: <>
|
|
||||||
<Text>{t`Top-level domains sponsored by specific organizations that set rules for registration and use, often related to particular interest groups or industries.`}</Text>
|
|
||||||
<Divider/>
|
|
||||||
<TldTable type='sTLD'/>
|
|
||||||
</>
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
key: 'gTLD',
|
key: 'gTLD',
|
||||||
label: t`Generic Top-Level-Domains`,
|
label: t`Generic Top-Level-Domains`,
|
||||||
children: <>
|
icon: <GlobalOutlined/>
|
||||||
<Text>{t`Generic top-level domains open to everyone, not restricted by specific criteria, representing various themes or industries.`}</Text>
|
|
||||||
<Divider/>
|
|
||||||
<TldTable type='gTLD' contractTerminated={false} specification13={false}/>
|
|
||||||
</>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'ngTLD',
|
|
||||||
label: t`Brand Generic Top-Level-Domains`,
|
|
||||||
children: <>
|
|
||||||
<Text>{t`Generic top-level domains associated with specific brands, allowing companies to use their own brand names as domains.`}</Text>
|
|
||||||
<Divider/>
|
|
||||||
<TldTable type='gTLD' contractTerminated={false} specification13/>
|
|
||||||
</>
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'ccTLD',
|
key: 'ccTLD',
|
||||||
label: t`Country-Code Top-Level-Domains`,
|
label: t`Country-Code Top-Level-Domains`,
|
||||||
children: <>
|
icon: <FlagOutlined/>
|
||||||
<Text>{t`Top-level domains based on country codes, identifying websites according to their country of origin.`}</Text>
|
},
|
||||||
<Divider/><TldTable type='ccTLD'/>
|
{
|
||||||
</>
|
key: 'ngTLD',
|
||||||
}
|
label: t`Brand Generic Top-Level-Domains`,
|
||||||
|
icon: <TrademarkOutlined/>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'sTLD',
|
||||||
|
label: t`Sponsored Top-Level-Domains`,
|
||||||
|
icon: <BankOutlined/>
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
activeTabKey={activeTabKey}
|
||||||
|
key={activeTabKey}
|
||||||
|
onTabChange={(k: string) => setActiveTabKey(k)}
|
||||||
|
>
|
||||||
|
{contentList[activeTabKey]}
|
||||||
|
|
||||||
|
</Card>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -178,7 +178,7 @@ msgstr ""
|
|||||||
|
|
||||||
#: assets/components/Sider.tsx:49
|
#: assets/components/Sider.tsx:49
|
||||||
#: assets/pages/StatisticsPage.tsx:114
|
#: assets/pages/StatisticsPage.tsx:114
|
||||||
#: assets/pages/search/TldPage.tsx:79
|
#: assets/pages/search/TldPage.tsx:78
|
||||||
msgid "TLD"
|
msgid "TLD"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
@ -504,24 +504,49 @@ msgid ""
|
|||||||
"WHOIS by its registrar."
|
"WHOIS by its registrar."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:86
|
#: assets/pages/search/TldPage.tsx:85
|
||||||
msgid "Flag"
|
msgid "Flag"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:89
|
#: assets/pages/search/TldPage.tsx:88
|
||||||
msgid "Country"
|
msgid "Country"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:96
|
#: assets/pages/search/TldPage.tsx:95
|
||||||
msgid "Registry Operator"
|
msgid "Registry Operator"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:125
|
#: assets/pages/search/TldPage.tsx:123
|
||||||
msgid "This page presents all active TLDs in the root zone database."
|
msgid ""
|
||||||
|
"Top-level domains sponsored by specific organizations that set rules for "
|
||||||
|
"registration and use, often related to particular interest groups or "
|
||||||
|
"industries."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:128
|
#: assets/pages/search/TldPage.tsx:128
|
||||||
msgid ""
|
msgid ""
|
||||||
|
"Generic top-level domains open to everyone, not restricted by specific "
|
||||||
|
"criteria, representing various themes or industries."
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
|
#: assets/pages/search/TldPage.tsx:133
|
||||||
|
msgid ""
|
||||||
|
"Generic top-level domains associated with specific brands, allowing "
|
||||||
|
"companies to use their own brand names as domains."
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
|
#: assets/pages/search/TldPage.tsx:138
|
||||||
|
msgid ""
|
||||||
|
"Top-level domains based on country codes, identifying websites according to "
|
||||||
|
"their country of origin."
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
|
#: assets/pages/search/TldPage.tsx:147
|
||||||
|
msgid "This page presents all active TLDs in the root zone database."
|
||||||
|
msgstr ""
|
||||||
|
|
||||||
|
#: assets/pages/search/TldPage.tsx:150
|
||||||
|
msgid ""
|
||||||
"IANA provides the list of currently active TLDs, regardless of their type, "
|
"IANA provides the list of currently active TLDs, regardless of their type, "
|
||||||
"and ICANN provides the list of gTLDs.\n"
|
"and ICANN provides the list of gTLDs.\n"
|
||||||
"In most cases, the two-letter ccTLD assigned to a country is made in "
|
"In most cases, the two-letter ccTLD assigned to a country is made in "
|
||||||
@ -532,45 +557,20 @@ msgid ""
|
|||||||
"At the same time, the list of root RDAP servers is updated."
|
"At the same time, the list of root RDAP servers is updated."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:140
|
#: assets/pages/search/TldPage.tsx:165
|
||||||
msgid "Sponsored Top-Level-Domains"
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:142
|
|
||||||
msgid ""
|
|
||||||
"Top-level domains sponsored by specific organizations that set rules for "
|
|
||||||
"registration and use, often related to particular interest groups or "
|
|
||||||
"industries."
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:149
|
|
||||||
msgid "Generic Top-Level-Domains"
|
msgid "Generic Top-Level-Domains"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:151
|
#: assets/pages/search/TldPage.tsx:170
|
||||||
msgid ""
|
|
||||||
"Generic top-level domains open to everyone, not restricted by specific "
|
|
||||||
"criteria, representing various themes or industries."
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:158
|
|
||||||
msgid "Brand Generic Top-Level-Domains"
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:160
|
|
||||||
msgid ""
|
|
||||||
"Generic top-level domains associated with specific brands, allowing "
|
|
||||||
"companies to use their own brand names as domains."
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:167
|
|
||||||
msgid "Country-Code Top-Level-Domains"
|
msgid "Country-Code Top-Level-Domains"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/search/TldPage.tsx:169
|
#: assets/pages/search/TldPage.tsx:175
|
||||||
msgid ""
|
msgid "Brand Generic Top-Level-Domains"
|
||||||
"Top-level domains based on country codes, identifying websites according to "
|
msgstr ""
|
||||||
"their country of origin."
|
|
||||||
|
#: assets/pages/search/TldPage.tsx:180
|
||||||
|
msgid "Sponsored Top-Level-Domains"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: assets/pages/StatisticsPage.tsx:35
|
#: assets/pages/StatisticsPage.tsx:35
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user