Add NS directory contacts

src/views/CountryNsOverviewContextAndStructure/NationalSocietyContacts/i18n.json

@@ -0,0 +1,9 @@
+{
+    "namespace": "nationalSocietyContacts",
+    "strings": {
+        "nSContactsTitle": "National Society Contacts",
+        "nSContactName": "Name",
+        "nSContactTitle": "Title",
+        "nSContactEmail":"Email"
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NationalSocietyContacts/index.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import { _cs } from '@togglecorp/fujs';
+
+import Container from '#components/Container';
+import Table from '#components/Table';
+import { createStringColumn } from '#components/Table/ColumnShortcuts';
+import useTranslation from '#hooks/useTranslation';
+import { type CountryOutletContext } from '#utils/outletContext';
+import { numericIdSelector } from '#utils/selectors';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+}
+function NationalSocietyContacts(props: Props) {
+    const { className } = props;
+    const strings = useTranslation(i18n);
+
+    const { countryResponse } = useOutletContext<CountryOutletContext>();
+    type CountryListItem = NonNullable<NonNullable<CountryOutletContext['countryResponse']>['contacts']>[number];
+
+    const contacts = countryResponse?.contacts;
+
+    const columns = useMemo(
+        () => ([
+            createStringColumn<CountryListItem, number>(
+                'name',
+                strings.nSContactName,
+                (item) => item.name,
+            ),
+            createStringColumn<CountryListItem, number>(
+                'title',
+                strings.nSContactTitle,
+                (item) => item.title,
+            ),
+            createStringColumn<CountryListItem, number>(
+                'email',
+                strings.nSContactEmail,
+                (item) => item.email,
+            ),
+        ]),
+        [
+            strings.nSContactName,
+            strings.nSContactTitle,
+            strings.nSContactEmail,
+        ],
+    );
+
+    return (
+        <Container
+            className={_cs(className, styles.nationalSocietyContactTable)}
+            childrenContainerClassName={styles.content}
+            heading={strings.nSContactsTitle}
+            withHeaderBorder
+        >
+            <Table
+                className={styles.table}
+                filtered={false}
+                data={contacts}
+                columns={columns}
+                keySelector={numericIdSelector}
+                pending={false}
+            />
+        </Container>
+    );
+}
+
+export default NationalSocietyContacts;

src/views/CountryNsOverviewContextAndStructure/NationalSocietyContacts/styles.module.css

@@ -0,0 +1,5 @@
+.national-society-contacts-table {
+    .table {
+        min-height: 0;
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/i18n.json

@@ -1,5 +1,5 @@
 {
-    "namespace": "countryNSDirectory",
+    "namespace": "nationalSocietyDirectory",
     "strings": {
         "countryNSDirectoryTitle": "NS Directory",
         "countryNSDirectorySource": "Source"

src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnitsMap/i18n.json

@@ -1,5 +1,5 @@
 {
-    "namespace": "countryNsOverviewContextAndStructure",
+    "namespace": "nationalSocietyLocalUnitsMap",
     "strings": {
         "localUnitsMapTitle": "NS Local Units",
         "localUnitsFilterTypePlaceholder": "Type (All)",

src/views/CountryNsOverviewContextAndStructure/index.tsx

@@ -7,8 +7,10 @@ import useTranslation from '#hooks/useTranslation';
 import { type CountryOutletContext } from '#utils/outletContext';
 import { resolveToString } from '#utils/translation';
 
-import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
+import NationalSocietyContacts from './NationalSocietyContacts';
 import NationalSocietyDirectory from './NationalSocietyDirectory';
+import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
+
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
@@ -23,6 +25,7 @@ export function Component() {
                 <NationalSocietyLocalUnitsMap className={styles.map} />
                 <NationalSocietyDirectory className={styles.directory} />
             </div>
+            <NationalSocietyContacts />
             {isDefined(countryResponse) && (
                 <Container
                     heading={strings.keyLinksHeading}