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": "initiativeListItem",
+    "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,99 @@
+import { _cs } from '@togglecorp/fujs';
+
+import Container from '#components/Container';
+import TextOutput from '#components/TextOutput';
+import useTranslation from '#hooks/useTranslation';
+
+import styles from './styles.module.css';
+import i18n from './i18n.json';
+
+interface Props {
+    className?: string;
+    id: number;
+    allocation: number | null | undefined;
+    categories: string[] | null | undefined;
+    fund_type: string | null | undefined;
+    funding_period: number | null | undefined;
+    title: string | null | undefined;
+    year: string | null | undefined;
+}
+
+function InitiativeListItem(props: Props) {
+    const {
+        className,
+        id,
+        allocation,
+        categories,
+        fund_type,
+        funding_period,
+        title,
+        year,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const categoriesItem = categories?.join(', ');
+
+    return (
+        <Container
+            className={_cs(styles.initiativeCard, className)}
+            childrenContainerClassName={styles.figures}
+            headingLevel={4}
+            withInternalPadding
+            withHeaderBorder
+            withoutWrapInHeading
+            // TODO: Verify Fund Name and and Fund Type
+            headerDescription={(
+                <TextOutput
+                    label={strings.initiativeFundNameTitle}
+                    value={fund_type}
+                    valueType="text"
+                    strongLabel
+                />
+            )}
+        >
+            <div
+                className={styles.figure}
+                key={id}
+            >
+                <TextOutput
+                    label={strings.initiativeYearApprovedTitle}
+                    value={year}
+                    valueType="text"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeTitle}
+                    value={title}
+                    valueType="text"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeFundingTypeTitle}
+                    value={fund_type}
+                    valueType="text"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeCategoriesTitle}
+                    value={categoriesItem}
+                    strongValue
+                />
+                <div className={styles.separator} />
+                <TextOutput
+                    label={strings.initiativeAllocationTitle}
+                    value={allocation}
+                    valueType="number"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeFundingPeriodTitle}
+                    value={`${funding_period} ${strings.initiativeMonthsSuffix}`}
+                    valueType="text"
+                    strongValue
+                />
+            </div>
+        </Container>
+    );
+}
+
+export default InitiativeListItem;

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

@@ -0,0 +1,18 @@
+.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-grow: 1;
+        gap: var(--go-ui-spacing-lg);
+
+        .separator {
+            flex-shrink: 0;
+            margin: var(--go-ui-spacing-md) 0;
+            background-color: var(--go-ui-color-separator);
+            height: var(--go-ui-width-separator-sm);
+        }
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/i18n.json

@@ -0,0 +1,7 @@
+{
+    "namespace": "countryNSDirectoryInitiatives",
+    "strings": {
+        "countryNSDirectoryInitiativesTitle": "NSD Initiatives",
+        "countryNSDirectoryInitiativesDescription": "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,62 @@
+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 InitiativeListItem from './InitiativeCard';
+import i18n from './i18n.json';
+
+interface Props {
+    className?: string;
+}
+
+type CountryListItem = NonNullable<NonNullable<CountryOutletContext['countryResponse']>['initiatives']>[number];
+
+const keySelector = (country: CountryListItem) => country.id;
+
+function NationalSocietyDirectoryInitiatives(props: Props) {
+    const { className } = props;
+    const strings = useTranslation(i18n);
+
+    const { countryResponse } = useOutletContext<CountryOutletContext>();
+
+    const rendererParams = useCallback(
+        (_: number, data: CountryListItem) => ({
+            id: data.id,
+            allocation: data?.allocation,
+            categories: data?.categories,
+            fund_type: data?.fund_type,
+            funding_period: data?.funding_period,
+            title: data?.title,
+            year: data?.year,
+        }),
+        [],
+    );
+
+    return (
+        <Container
+            heading={strings.countryNSDirectoryInitiativesTitle}
+            // TODO: Add Contacts link in description
+            headerDescription={strings.countryNSDirectoryInitiativesDescription}
+            withHeaderBorder
+            withInternalPadding
+        >
+            <Grid
+                className={className}
+                data={countryResponse?.initiatives}
+                pending={false}
+                errored={false}
+                filtered={false}
+                keySelector={keySelector}
+                renderer={InitiativeListItem}
+                rendererParams={rendererParams}
+                numPreferredColumns={3}
+            />
+        </Container>
+    );
+}
+
+export default NationalSocietyDirectoryInitiatives;

src/views/CountryNsOverviewContextAndStructure/index.tsx

@@ -9,6 +9,7 @@ import { resolveToString } from '#utils/translation';
 
 import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
 import NationalSocietyDirectory from './NationalSocietyDirectory';
+import NationalSocietyDirectoryInitiatives from './NsDirectoryInitiatives';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
@@ -77,6 +78,7 @@ export function Component() {
                     )}
                 </Container>
             )}
+            <NationalSocietyDirectoryInitiatives />
         </div>
     );
 }