Add NS directory initiatives list

src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx

@@ -13,6 +13,7 @@ import i18n from './i18n.json';
 interface Props {
     className?: string;
 }
+
 function NationalSocietyDirectory(props: Props) {
     const { className } = props;
     const strings = useTranslation(i18n);

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/i18n.json

@@ -0,0 +1,13 @@
+{
+    "namespace": "initiativeCard",
+    "strings": {
+        "initiativeFundNameTitle": "Fund Name",
+        "initiativeYearApprovedTitle": "Year Approved",
+        "initiativeTitle": "Initiative Title",
+        "initiativeFundingTypeTitle": "Funding Type",
+        "initiativeCategoriesTitle": "Categories",
+        "initiativeAllocationTitle": "Allocation CHF",
+        "initiativeFundingPeriodTitle": "Funding Period",
+        "initiativeMonthsSuffix": "months"
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/index.tsx

@@ -0,0 +1,87 @@
+import { _cs } from '@togglecorp/fujs';
+
+import Container from '#components/Container';
+import TextOutput from '#components/TextOutput';
+import useTranslation from '#hooks/useTranslation';
+import { GoApiResponse } from '#utils/restRequest';
+
+import styles from './styles.module.css';
+import i18n from './i18n.json';
+
+type CountryResponse = NonNullable<GoApiResponse<'/api/v2/country/{id}/'>>
+interface Props {
+    className?: string;
+    initiative: NonNullable<CountryResponse['initiatives']>[number];
+}
+
+function InitiativeCard(props: Props) {
+    const {
+        className,
+        initiative,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const categories = initiative.categories?.join(', ');
+
+    return (
+        <Container
+            className={_cs(styles.initiativeCard, className)}
+            childrenContainerClassName={styles.figures}
+            headingLevel={4}
+            withHeaderBorder
+            // TODO: Verify Fund Name and and Fund Type
+            headerDescription={(
+                <TextOutput
+                    label={strings.initiativeFundNameTitle}
+                    value={initiative.fund_type}
+                    valueType="text"
+                    strongValue
+                />
+            )}
+            footerContent={(
+                <div className={styles.footerContent}>
+                    <div className={styles.separator} />
+                    <TextOutput
+                        label={strings.initiativeAllocationTitle}
+                        value={initiative.allocation}
+                        valueType="number"
+                        strongValue
+                    />
+                    <TextOutput
+                        label={strings.initiativeFundingPeriodTitle}
+                        value={`${initiative.funding_period} ${strings.initiativeMonthsSuffix}`}
+                        valueType="text"
+                        strongValue
+                    />
+                </div>
+            )}
+        >
+            <TextOutput
+                label={strings.initiativeYearApprovedTitle}
+                value={initiative.year}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.initiativeTitle}
+                value={initiative.title}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.initiativeFundingTypeTitle}
+                value={initiative.fund_type}
+                valueType="text"
+                strongValue
+            />
+            <TextOutput
+                label={strings.initiativeCategoriesTitle}
+                value={categories}
+                valueType="text"
+                strongValue
+            />
+        </Container>
+    );
+}
+
+export default InitiativeCard;

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/styles.module.css

@@ -0,0 +1,21 @@
+.initiative-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+    padding: var(--go-ui-spacing-lg);
+
+    .figures {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-xs);
+
+    }
+    .footer-content {
+        flex-grow: 1;
+
+        .separator {
+            flex-shrink: 0;
+            margin-bottom: var(--go-ui-spacing-sm);
+            border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator)
+        }
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/i18n.json

@@ -0,0 +1,7 @@
+{
+    "namespace": "nsDirectoryInitiatives",
+    "strings": {
+        "nSDirectoryInitiativesTitle": "NSD Initiatives",
+        "nSDirectoryInitiativesDescription": "The following data displays ongoing and implemented/closed Initiatives funded  by the different NSD funding mechanisms within the country, which are reported by the respective fund office. Contacts: CBF Office, NSIA Office, ESF Secretariat."
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/index.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { useOutletContext } from 'react-router-dom';
+
+import Container from '#components/Container';
+import Grid from '#components/Grid';
+import useTranslation from '#hooks/useTranslation';
+import { type CountryOutletContext } from '#utils/outletContext';
+
+import InitiativeCard from './InitiativeCard';
+import i18n from './i18n.json';
+
+interface Props {
+    className?: string;
+}
+
+type CountryInitiative = NonNullable<NonNullable<CountryOutletContext['countryResponse']>['initiatives']>[number];
+
+const keySelector = (initiative: CountryInitiative) => initiative.id;
+
+function NationalSocietyDirectoryInitiatives(props: Props) {
+    const { className } = props;
+    const strings = useTranslation(i18n);
+
+    const { countryResponse } = useOutletContext<CountryOutletContext>();
+
+    const rendererParams = useCallback(
+        (_: number, data: CountryInitiative) => ({
+            initiative: data,
+        }),
+        [],
+    );
+
+    return (
+        <Container
+            heading={strings.nSDirectoryInitiativesTitle}
+            // TODO: Add Contacts link in description
+            headerDescription={strings.nSDirectoryInitiativesDescription}
+            withHeaderBorder
+        >
+            <Grid
+                className={className}
+                data={countryResponse?.initiatives}
+                pending={false}
+                errored={false}
+                filtered={false}
+                keySelector={keySelector}
+                renderer={InitiativeCard}
+                rendererParams={rendererParams}
+                numPreferredColumns={3}
+            />
+        </Container>
+    );
+}
+
+export default NationalSocietyDirectoryInitiatives;

src/views/CountryNsOverviewContextAndStructure/index.tsx

@@ -10,6 +10,7 @@ import { resolveToString } from '#utils/translation';
 import NationalSocietyContacts from './NationalSocietyContacts';
 import NationalSocietyDirectory from './NationalSocietyDirectory';
 import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
+import NationalSocietyDirectoryInitiatives from './NsDirectoryInitiatives';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -25,6 +26,7 @@ export function Component() {
                 <NationalSocietyLocalUnitsMap className={styles.map} />
                 <NationalSocietyDirectory className={styles.directory} />
             </div>
+            <NationalSocietyDirectoryInitiatives />
             <NationalSocietyContacts />
             {isDefined(countryResponse) && (
                 <Container