Open-Source-Bazaar.github.io/components/Organization/ChinaPublicInterestMap.tsx at 20db4cc8cb752a97ee497265a0aef36c3e3e7faa · Open-Source-Bazaar/Open-Source-Bazaar.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { observer } from 'mobx-react';
import { FC, useContext } from 'react';
import { Badge,Card, Col, Row } from 'react-bootstrap';

import { OrganizationModel, OrganizationStatistic } from '../../models/Organization';
import { I18nContext } from '../../models/Translation';

export interface ChinaPublicInterestMapProps extends OrganizationStatistic {
  store: OrganizationModel;
}

export const ChinaPublicInterestMap: FC<ChinaPublicInterestMapProps> = observer(
  ({ store, year, city, type, tag }) => {
    const { t } = useContext(I18nContext);

    return (
      <div>
        <Row className="g-4">
          <Col md={6} lg={3}>
            <Card>
              <Card.Body>
                <Card.Title>{t('by_year')}</Card.Title>
                <div>
                  {year.slice(0, 5).map(item => (
                    <Badge key={item.label} bg="primary" className="me-2 mb-2">
                      {item.label}: {item.count}
                    </Badge>
                  ))}
                </div>
              </Card.Body>
            </Card>
          </Col>

          <Col md={6} lg={3}>
            <Card>
              <Card.Body>
                <Card.Title>{t('by_city')}</Card.Title>
                <div>
                  {city.slice(0, 5).map(item => (
                    <Badge key={item.label} bg="success" className="me-2 mb-2">
                      {item.label}: {item.count}
                    </Badge>
                  ))}
                </div>
              </Card.Body>
            </Card>
          </Col>

          <Col md={6} lg={3}>
            <Card>
              <Card.Body>
                <Card.Title>{t('by_type')}</Card.Title>
                <div>
                  {type.slice(0, 5).map(item => (
                    <Badge key={item.label} bg="info" className="me-2 mb-2">
                      {item.label}: {item.count}
                    </Badge>
                  ))}
                </div>
              </Card.Body>
            </Card>
          </Col>

          <Col md={6} lg={3}>
            <Card>
              <Card.Body>
                <Card.Title>{t('by_tag')}</Card.Title>
                <div>
                  {tag.slice(0, 5).map(item => (
                    <Badge key={item.label} bg="warning" className="me-2 mb-2">
                      {item.label}: {item.count}
                    </Badge>
                  ))}
                </div>
              </Card.Body>
            </Card>
          </Col>
        </Row>

        <Card className="mt-4">
          <Card.Body>
            <Card.Title>{t('about_china_public_interest_map')}</Card.Title>
            <Card.Text>
              {t('china_public_interest_map_description')}
            </Card.Text>
          </Card.Body>
        </Card>
      </div>
    );
  },
);