Output cards with dynamic content

client/api/main-page/main-page.types.ts

@@ -38,6 +38,7 @@ export interface Card {
         cardId: null;
         subtitle: null | string;
         subtitleColor: string;
+        dynamicId: string;
         createdAt: Date;
         updatedAt: Date;
         publishedAt: Date;

client/components/MainPage/Card/Card.module.css

@@ -9,6 +9,7 @@
 
     --CardSubtitleColor: inherit;
 
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;

client/components/MainPage/Card/Card.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames/bind';
 import { CardProps } from './Card.types';
 
@@ -24,6 +23,7 @@ export function Card({
     buttonBackground,
     subtitle,
     subtitleColor,
+    dynamicContent
 }: CardProps) {
 
     return (
@@ -43,9 +43,15 @@ export function Card({
                 {t(title)}
             </div>}
 
-            {subtitle && <div className={cn(styles.CardSubtitle)}>
-                {t(subtitle)}
-            </div>}
+            {
+                dynamicContent
+                    ? dynamicContent
+                    : <>
+                        {subtitle && <div className={cn(styles.CardSubtitle)}>
+                            {subtitle}
+                        </div>}
+                    </>
+            }
         </a>
     );
 }

client/components/MainPage/Card/Card.types.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from "react";
+
 export type CardProps = {
     title: string;
     titleColor: string;
@@ -11,5 +13,6 @@ export type CardProps = {
     subtitle: string;
     subtitleColor: string;
     invert: boolean;
+    dynamicContent: ReactElement;
     key: number;
 };

client/components/MainPage/Card/CardDynamic/CardTrafficJams.module.css

@@ -0,0 +1,6 @@
+.CardTrafficJams {
+    position: absolute;
+    bottom: .35em;
+    right: .45em;
+    font-size: 100px;
+}

client/components/MainPage/Card/CardDynamic/CardTrafficJams.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames/bind';
+
+import styles from './CardTrafficJams.module.css';
+
+const cn = classNames.bind(styles);
+
+export function CardTrafficJams({ score }) {
+    return (
+        <>
+            <div className={cn(styles.CardTrafficJams)}>
+                {score}
+            </div>
+        </>
+    )
+}

client/components/MainPage/Card/CardDynamic/CardTransportA11y.module.css

@@ -0,0 +1,17 @@
+.CardTransportA11y {
+    font-size: 1.25em;
+}
+
+.CardTransportA11yList {
+    display: flex;
+    gap: 1.25em;
+}
+
+.CardTransportA11yItem {
+    font-weight: 600;
+    text-align: left;
+}
+
+.CardTransportA11yItem dd {
+    margin: 12px 0 0;
+}

client/components/MainPage/Card/CardDynamic/CardTransportA11y.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames/bind';
+
+import styles from './CardTransportA11y.module.css';
+
+const cn = classNames.bind(styles);
+
+export function CardTransportA11y({ buses, trolls, trams }) {
+    return (
+        <div className={cn(styles.CardTransportA11y)}>
+            <p>
+                Сейчас в городе ходит низкопольный транспорт:
+            </p>
+
+            <dl className={cn(styles.CardTransportA11yList)}>
+                <div className={cn(styles.CardTransportA11yItem)}>
+                    <dt>Автобусы</dt>
+                    <dd>{buses}</dd>
+                </div>
+
+                <div className={cn(styles.CardTransportA11yItem)}>
+                    <dt>Троллейбусы</dt>
+                    <dd>{trolls}</dd>
+                </div>
+
+                <div className={cn(styles.CardTransportA11yItem)}>
+                    <dt>Трамваи</dt>
+                    <dd>{trams}</dd>
+                </div>
+            </dl>
+        </div>
+    )
+}

client/components/MainPage/MainPage.module.css

@@ -58,9 +58,7 @@
     aspect-ratio: 1 / 1;
 }
 
-/* TODO: control grid size via CMS */
-.MainPageCardGrid > *:nth-child(1),
-.MainPageCardGrid > *:nth-child(8) {
+.MainPageCardGrid > *:nth-child(1) {
     grid-area: span 1 / span 2;
     aspect-ratio: 2 / 1;
 }
@@ -72,9 +70,7 @@
     }
 
     .MainPageCardGrid > *:nth-child(1),
-    .MainPageCardGrid > *:nth-child(6),
-    .MainPageCardGrid > *:nth-child(8),
-    .MainPageCardGrid > *:nth-child(11) {
+    .MainPageCardGrid > *:nth-child(6) {
         grid-area: span 1 / span 2;
         aspect-ratio: 2 / 1;
     }
@@ -85,9 +81,5 @@
     .MainPageCardGrid {
         grid-template-columns: repeat(4,1fr);
     }
-
-    .MainPageCardGrid > * {
-        aspect-ratio: auto;
-    }
 }
 

client/components/MainPage/MainPage.tsx

@@ -4,18 +4,25 @@ import React from 'react';
 import classNames from 'classnames/bind';
 import { MainPageTypes } from './MainPage.types';
 import { Card } from './Card/Card';
+import { CardTrafficJams } from './Card/CardDynamic/CardTrafficJams';
+import { CardTransportA11y } from './Card/CardDynamic/CardTransportA11y';
 
 import Logo from './Logo.svg';
-import Footer from './Footer.svg';
 
 import styles from './MainPage.module.css';
 import { Marquee } from './Marquee/Marquee';
 
 const cn = classNames.bind(styles);
 
-export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeItems }: MainPageTypes) {
-    // TODO Output data to dynamic cards
-    console.log({ trafficJams, a11yTransportCounters });
+export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageTypes) {
+    const getDynamicContent = (dynamicId) => {
+        switch (dynamicId) {
+            case 'a11y-transport':
+                return <CardTransportA11y {...cardsDynamicData.a11yTransportCounters} />
+            case 'traffic-jams':
+                return <CardTrafficJams score={cardsDynamicData.trafficJams} />
+        }
+    }
 
     return (
         <div className={cn(styles.MainPage)}>
@@ -28,8 +35,8 @@ export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeIte
                 <div className={styles.MainPageCardGrid}>
                     {cards
                         .sort((a, b) => a.attributes.priority - b.attributes.priority)
-                        .map(({ id, attributes }) => (
-                            <Card
+                        .map(({ id, attributes }) => {
+                            return <Card
                                 title={attributes.title}
                                 titleColor={attributes.titleColor}
                                 titleBackground={attributes.titleBackground}
@@ -42,9 +49,10 @@ export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeIte
                                 subtitle={attributes.subtitle}
                                 subtitleColor={attributes.subtitleColor}
                                 invert={attributes.invert}
+                                dynamicContent={getDynamicContent(attributes.dynamicId)}
                                 key={id}
                             />
-                        ))}
+                        })}
                 </div>
 
                 <Marquee items={marqueeItems.map(({ attributes: { message } }) => message)} />
@@ -53,4 +61,4 @@ export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeIte
             <div className={styles.MainPageFooter}></div>
         </div>
     );
-}
+}

client/components/MainPage/MainPage.types.tsx

@@ -7,8 +7,10 @@ import type {
 
 export type MainPageTypes = {
     cards: Card[];
-    trafficJams: number;
-    a11yTransportCounters: AccessibilityTransportCounters,
+    cardsDynamicData: {
+        trafficJams: number;
+        a11yTransportCounters: AccessibilityTransportCounters,
+    };
     notifications: Notification[];
     marqueeItems: Marquee[];
 };

client/pages/index.tsx

@@ -19,8 +19,10 @@ export async function getStaticProps() {
     return {
         props: {
             cards: await MainPageApi.getCards() || [],
-            trafficJams: await MainPageApi.getTrafficJamsCounter() || null,
-            a11yTransportCounters: await MainPageApi.getA11yTransportCounters() || {},
+            cardsDynamicData: {
+                trafficJams: await MainPageApi.getTrafficJamsCounter() || null,
+                a11yTransportCounters: await MainPageApi.getA11yTransportCounters() || {},
+            },
             marqueeItems: await MainPageApi.getMarqueeItems() || [],
         },
         revalidate: 60,