c19-tracker/src/components/Cards/Cards.jsx at master · adethis/c19-tracker · 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
import React, { Component } from 'react';
import CountUp from 'react-countup';

import infected from '../../assets/images/virus.png';
import health from '../../assets/images/wellbeing.png';
import die from '../../assets/images/death.png';

class Cards extends Component {
    render() {
        const data = this.props.data;

        if (!data.confirmed) {
            return 'Loading...';
        }

        return (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
                <div className="md:flex rounded overflow-hidden shadow-lg border-b-4 border-yellow-300 p-4 bg-white">
                    <div className="inline-flex md:flex-shrink-0 sm:inline-block">
                        <img src={ infected } className="mt-5" alt=""/>
                    </div>
                    <div className="mt-4 md:mt-0 md:ml-4 inline-block sm:inline-block pl-4 sm:pl-4 md:pl-0">
                        <div className="uppercase tracking-wide text-sm text-yellow-300 font-medium">Infected</div>
                        <p className="block mt-1 text-lg leading-tight font-semibold text-gray-700">
                            <CountUp start={ 0 } end={ data.confirmed.value } duration={ 2.5 } separator="," />
                        </p>
                        <p className="text-gray-700 text-base mt-2">{ new Date(data.lastUpdate).toDateString() }</p>
                        <p className="text-xs text-gray-600">Number of active cases of C19</p>
                    </div>
                </div>

                <div className="md:flex rounded overflow-hidden shadow-lg border-b-4 border-teal-300 p-4 bg-white">
                    <div className="inline-flex md:flex-shrink-0 sm:inline-block">
                        <img src={ health } className="mt-5" alt=""/>
                    </div>
                    <div className="mt-4 md:mt-0 md:ml-4 inline-block sm:inline-block pl-4 sm:pl-4 md:pl-0">
                        <div className="uppercase tracking-wide text-sm text-teal-300 font-medium">Recovered</div>
                        <p className="block mt-1 text-lg leading-tight font-semibold text-gray-700">
                            <CountUp start={ 0 } end={ data.recovered.value } duration={ 2.5 } separator="," />
                        </p>
                        <p className="text-gray-700 text-base mt-2">{ new Date(data.lastUpdate).toDateString() }</p>
                        <p className="text-xs text-gray-600">Number of recoveries from Covid-19</p>
                    </div>
                </div>

                <div className="md:flex rounded overflow-hidden shadow-lg border-b-4 border-red-300 p-4 bg-white">
                    <div className="inline-flex md:flex-shrink-0 sm:inline-block">
                        <img src={ die } className="mt-3" alt=""/>
                    </div>
                    <div className="mt-4 md:mt-0 md:ml-4 inline-block sm:inline-block pl-4 sm:pl-4 md:pl-0">
                        <div className="uppercase tracking-wide text-sm text-red-300 font-medium">Death</div>
                        <p className="block mt-1 text-lg leading-tight font-semibold text-gray-700">
                            <CountUp start={ 0 } end={ data.deaths.value } duration={ 2.5 } separator="," />
                        </p>
                        <p className="text-gray-700 text-base mt-2">{ new Date(data.lastUpdate).toDateString() }</p>
                        <p className="text-xs text-gray-600">Number of death caused Covid-19</p>
                    </div>
                </div>
            </div>
        )
    }
}

export default Cards;