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,60 @@
+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';
+
+interface Props {
+    className?: string;
+}
+
+interface FeedData {
+    logo: string;
+    name: string;
+    language: string;
+}
+interface Props {
+    className?: string;
+    feedData: FeedData;
+}
+
+function SourceCard(props: Props) {
+    const { className, feedData } = props;
+    const strings = useTranslation(i18n);
+    return (
+        <Container
+            className={(styles.sourceCard, className)}
+            heading={(
+                <div className={styles.header}>
+                    <div className={styles.flexContainer}>
+                        <img src={feedData.logo} alt="Logo" className={styles.logo} />
+                        <div>
+                            <div className={styles.title}>{feedData.name}</div>
+                            <TextOutput
+                                className={styles.lastUpdated}
+                                label={strings.sourceCardLastUpdated}
+                                value={feedData.language}
+                                valueType="date"
+                            />
+                            <Button
+                                variant="primary"
+                                name={feedData.language}
+                            >
+                                {strings.languageTitle}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            )}
+            headingLevel={4}
+            withInternalPadding
+            withHeaderBorder
+            withoutWrapInHeading
+        />
+    );
+}
+export default SourceCard;

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

@@ -0,0 +1,37 @@
+.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;
+        }
+    }
+  }
+  .flexContainer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+

src/views/ViewAllSource/i18n.json

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

src/views/ViewAllSource/index.tsx

@@ -0,0 +1,54 @@
+import {
+    gql,
+    useQuery,
+} from '@apollo/client';
+import { Container } from '@ifrc-go/ui';
+
+import SourceCard from './SourceCard';
+
+const SOURCE_FEEDS = gql`
+    query SourceFeeds($pagination: OffsetPaginationInput) {
+        public {
+            feeds(pagination: $pagination) {
+                limit
+                offset
+                items {
+                    languages {
+                        logo
+                        name
+                        language
+                    }
+                }
+            }
+        }
+    }`;
+
+type Source = {
+    id: number;
+    logo: string;
+    name: string
+    sourceName: string;
+    lastUpdated: string;
+    language: string;
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { data } = useQuery(SOURCE_FEEDS, {
+        variables: {
+            pagination: {
+                limit: 10,
+                offset: 0,
+            },
+        },
+    });
+    return (
+        <Container>
+            {data.feeds.map((datum: Source) => (
+                <SourceCard key={datum.id} feedData={datum} />
+            ))}
+        </Container>
+    );
+}
+
+Component.displayName = 'ViewAllSource';