Add Carts and statice data for view all source

src/App/routes.tsx

@@ -50,10 +50,19 @@ const preferences = myWrapRoute({
     parent: root,
 });
 
+const viewAllSource = myWrapRoute({
+    title: 'ViewAllSource',
+    path: 'view-all-source',
+    component: () => import('#views/ViewAllSource'),
+    componentProps: {},
+    parent: root,
+});
+
 export const wrappedRoutes = {
     root,
     home,
     preferences,
+    viewAllSource,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/views/AlertMap/index.tsx

@@ -41,7 +41,7 @@ function OngoingAlertMap(props: Props) {
             actions={(
                 <Link
                     className={styles.sources}
-                    to="/"
+                    to="/view-all-source"
                 >
                     {strings.mapViewAllSources}
                 </Link>

src/views/ViewAllSource/SourceCard/i18n.json

@@ -0,0 +1,7 @@
+{
+    "namespace": "source card",
+    "strings": {
+        "languageTitle":"language",
+        "sourceCardLastUpdated":"Date"
+    }
+}

src/views/ViewAllSource/SourceCard/index.tsx

@@ -0,0 +1,61 @@
+import {
+    Button,
+    Container,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+// Static data
+const staticData = {
+    id: 1,
+    logo: 'logo.png',
+    sourceName: 'Static Source Name',
+    lastUpdated: '2022-01-01',
+};
+
+interface Props {
+    className?: string;
+}
+
+function SourceCard(props: Props) {
+    const { className } = props;
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            className={(styles.sourceCard, className)}
+            heading={(
+                <div className={styles.header}>
+                    <img src={staticData.logo} alt="Logo" className={styles.logo} />
+                    <div className={styles.title}>{staticData.sourceName}</div>
+                </div>
+            )}
+            headingLevel={4}
+            withInternalPadding
+            withHeaderBorder
+            withoutWrapInHeading
+            headerDescription={(
+                <>
+                    <TextOutput
+                        className={styles.lastUpdated}
+                        label={strings.sourceCardLastUpdated}
+                        value={staticData.lastUpdated}
+                        valueType="date"
+                    />
+                    <Button
+                        variant="primary"
+                        name={String}
+                    >
+                        {strings.languageTitle}
+                    </Button>
+                </>
+
+            )}
+        />
+    );
+}
+
+export default SourceCard;

src/views/ViewAllSource/SourceCard/styles.module.css

@@ -0,0 +1,31 @@
+.view-all-source{
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .severity-indicator {
+        font-size: var(--go-ui-font-size-xl);
+    }
+
+    .last-updated {
+        color: var(--go-ui-color-text-light);
+    }
+
+    .figures {
+        display: flex;
+        flex-grow: 1;
+        gap: var(--go-ui-spacing-lg);
+
+        .separator {
+            flex-shrink: 0;
+            background-color: var(--go-ui-color-separator);
+            width: var(--go-ui-width-separator-sm);
+        }
+
+        .figure {
+            flex-basis: 0;
+            flex-grow: 1;
+            padding: 0;
+        }
+    }
+  }
+

src/views/ViewAllSource/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "viewAllSource",
+    "strings": {
+        "viewAllSourceHeading": "View All Sources"
+    }
+}

src/views/ViewAllSource/index.tsx

@@ -0,0 +1,64 @@
+import { useCallback } from 'react';
+import {
+    Container,
+    Grid,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import SourceCard from './SourceCard';
+
+import i18n from './i18n.json';
+
+type Source = {
+    id: number;
+    logo: string;
+    sourceName: string;
+    lastUpdated: string;
+};
+
+type Props = {
+    // Define the props here
+};
+
+const keySelector = (source: Source) => source.id;
+
+// Static data
+const sources: Source[] = [
+    {
+        id: 1, logo: 'logo1.png', sourceName: 'Source 1', lastUpdated: '2022-01-01',
+    },
+    {
+        id: 2, logo: 'logo2.png', sourceName: 'Source 2', lastUpdated: '2022-01-02',
+    },
+    {
+        id: 3, logo: 'logo3.png', sourceName: 'Source 3', lastUpdated: '2022-01-03',
+    },
+];
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    const rendererParams = useCallback(
+        (source: Source): Props => ({
+            data: source,
+        }),
+        [],
+    ) as unknown as (key: number, datum: Source, index: number, data: Source[]) => Props;
+
+    return (
+        <Container>
+            <Grid
+                data={sources}
+                keySelector={keySelector}
+                renderer={SourceCard}
+                rendererParams={rendererParams}
+                numPreferredColumns={2}
+                pending={false}
+                errored={false}
+                filtered={false}
+            />
+        </Container>
+    );
+}
+
+Component.displayName = 'ViewAllSource';