diff --git a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx b/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx index 9c4f54e3d..56f1aac7e 100644 --- a/src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx +++ b/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); diff --git a/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/i18n.json b/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/i18n.json new file mode 100644 index 000000000..530a42fbc --- /dev/null +++ b/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" + } +} diff --git a/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/index.tsx b/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/index.tsx new file mode 100644 index 000000000..34d7ffc85 --- /dev/null +++ b/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> +interface Props { + className?: string; + initiative: NonNullable[number]; +} + +function InitiativeCard(props: Props) { + const { + className, + initiative, + } = props; + + const strings = useTranslation(i18n); + const categories = initiative.categories?.join(', '); + + return ( + + )} + footerContent={( +
+
+ + +
+ )} + > + + + + + + ); +} + +export default InitiativeCard; diff --git a/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/styles.module.css b/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/styles.module.css new file mode 100644 index 000000000..9188fa167 --- /dev/null +++ b/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) + } + } +} diff --git a/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/i18n.json b/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/i18n.json new file mode 100644 index 000000000..3161a6c8f --- /dev/null +++ b/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." + } +} diff --git a/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/index.tsx b/src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/index.tsx new file mode 100644 index 000000000..ff7f58d01 --- /dev/null +++ b/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['initiatives']>[number]; + +const keySelector = (initiative: CountryInitiative) => initiative.id; + +function NationalSocietyDirectoryInitiatives(props: Props) { + const { className } = props; + const strings = useTranslation(i18n); + + const { countryResponse } = useOutletContext(); + + const rendererParams = useCallback( + (_: number, data: CountryInitiative) => ({ + initiative: data, + }), + [], + ); + + return ( + + + + ); +} + +export default NationalSocietyDirectoryInitiatives; diff --git a/src/views/CountryNsOverviewContextAndStructure/index.tsx b/src/views/CountryNsOverviewContextAndStructure/index.tsx index 1fdda0e2d..ff9152d54 100644 --- a/src/views/CountryNsOverviewContextAndStructure/index.tsx +++ b/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() {
+ {isDefined(countryResponse) && (