feat: refactor tld page

assets/pages/search/TldPage.tsx

@@ -1,15 +1,15 @@
 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 {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
+            <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',
                         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',
                         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>
         </>
     )
 }

translations/translations.pot

@@ -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
+#: 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 ""
 
 #: 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
+#: 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"
 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"
 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 ""
 
 #: assets/pages/StatisticsPage.tsx:35