mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-18 02:05:36 +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 React, { useEffect, useState} from 'react'
|
||||
import {Collapse, Divider, Table, Typography} from 'antd'
|
||||
import type { Tld} from '../../utils/api'
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import {Card, Divider, Table, Typography} from 'antd'
|
||||
import type {Tld} from '../../utils/api'
|
||||
import {getTldList} from '../../utils/api'
|
||||
import {t} from 'ttag'
|
||||
import {regionNames} from '../../i18n'
|
||||
import useBreakpoint from '../../hooks/useBreakpoint'
|
||||
import type {ColumnType} from 'antd/es/table'
|
||||
import punycode from 'punycode/punycode'
|
||||
import {getCountryCode} from '../../utils/functions/getCountryCode'
|
||||
import {tldToEmoji} from '../../utils/functions/tldToEmoji'
|
||||
import {BankOutlined, FlagOutlined, GlobalOutlined, TrademarkOutlined} from "@ant-design/icons"
|
||||
|
||||
const {Text, Paragraph} = Typography
|
||||
|
||||
@ -29,7 +29,6 @@ function TldTable(filters: FiltersType) {
|
||||
Country?: string
|
||||
}
|
||||
|
||||
const sm = useBreakpoint('sm')
|
||||
const [dataTable, setDataTable] = useState<TableRow[]>([])
|
||||
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() {
|
||||
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 (
|
||||
<>
|
||||
@ -131,47 +153,41 @@ export default function TldPage() {
|
||||
At the same time, the list of root RDAP servers is updated.`}
|
||||
</Paragraph>
|
||||
<Divider/>
|
||||
<Collapse
|
||||
accordion
|
||||
size={sm ? 'small' : 'large'}
|
||||
items={[
|
||||
{
|
||||
key: 'sTLD',
|
||||
label: t`Sponsored Top-Level-Domains`,
|
||||
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'/>
|
||||
</>
|
||||
},
|
||||
|
||||
<Card
|
||||
style={{width: '100%'}}
|
||||
tabProps={{
|
||||
size: 'middle',
|
||||
}}
|
||||
tabList={[
|
||||
{
|
||||
key: 'gTLD',
|
||||
label: t`Generic Top-Level-Domains`,
|
||||
children: <>
|
||||
<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/>
|
||||
</>
|
||||
icon: <GlobalOutlined/>
|
||||
},
|
||||
{
|
||||
key: 'ccTLD',
|
||||
label: t`Country-Code Top-Level-Domains`,
|
||||
children: <>
|
||||
<Text>{t`Top-level domains based on country codes, identifying websites according to their country of origin.`}</Text>
|
||||
<Divider/><TldTable type='ccTLD'/>
|
||||
</>
|
||||
}
|
||||
icon: <FlagOutlined/>
|
||||
},
|
||||
{
|
||||
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/pages/StatisticsPage.tsx:114
|
||||
#: assets/pages/search/TldPage.tsx:79
|
||||
#: assets/pages/search/TldPage.tsx:78
|
||||
msgid "TLD"
|
||||
msgstr ""
|
||||
|
||||
@ -504,24 +504,49 @@ msgid ""
|
||||
"WHOIS by its registrar."
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:86
|
||||
#: assets/pages/search/TldPage.tsx:85
|
||||
msgid "Flag"
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:89
|
||||
#: assets/pages/search/TldPage.tsx:88
|
||||
msgid "Country"
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:96
|
||||
#: assets/pages/search/TldPage.tsx:95
|
||||
msgid "Registry Operator"
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:125
|
||||
msgid "This page presents all active TLDs in the root zone database."
|
||||
#: assets/pages/search/TldPage.tsx:123
|
||||
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:128
|
||||
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, "
|
||||
"and ICANN provides the list of gTLDs.\n"
|
||||
"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."
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:140
|
||||
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
|
||||
#: assets/pages/search/TldPage.tsx:165
|
||||
msgid "Generic Top-Level-Domains"
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:151
|
||||
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
|
||||
#: assets/pages/search/TldPage.tsx:170
|
||||
msgid "Country-Code Top-Level-Domains"
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:169
|
||||
msgid ""
|
||||
"Top-level domains based on country codes, identifying websites according to "
|
||||
"their country of origin."
|
||||
#: assets/pages/search/TldPage.tsx:175
|
||||
msgid "Brand Generic Top-Level-Domains"
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/search/TldPage.tsx:180
|
||||
msgid "Sponsored Top-Level-Domains"
|
||||
msgstr ""
|
||||
|
||||
#: assets/pages/StatisticsPage.tsx:35
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user