sabesansathananthan

import React from "react";
import Maps from "./Maps";

function App() {
  return <Maps />;
}

export default App;

sabesansathananthan

export class Maps extends React.Component {
  render() {
    const mapStyles = {
      width: "100%",
      height: "100%",
    };
    return (
      <Map
        google={this.props.google}
        zoom={8}

sabesansathananthan

export default {
  mapStyle: [
    {
      elementType: "geometry",
      stylers: [
        {
          color: "#ebe3cd",
        },
      ],
    },

sabesansathananthan

import googleMapStyles from "./GoogelMapStyle";

export class Maps extends React.Component {
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={8}
        style={this.props.mapStyle}
        initialCenter={{ lat: 9.761927, lng: 79.95244 }}

sabesansathananthan

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

sabesansathananthan

import axios from "axios";

const url = "https://covid19.mathdro.id/api";

export const fetchData = async (country) => {
  let changeableUrl = url;
  if (country) {
    changeableUrl = `${url}/countries/${country}`;
  }

sabesansathananthan

import React from "react";
import { Card, CardContent, Typography, Grid } from "@material-ui/core";
import styles from "./Cards.module.css";
import CountUp from "react-countup";
import cx from "classnames";

const Cards = ({
  data: { confirmed, recovered, deaths, lastUpdate },
  country,
}) => {

sabesansathananthan

.container {
  margin: 50px 0px;
}

.card {
  margin: 0 2% !important;
}

.infected {
  background-color: rgba(102, 179, 255, 0.5) !important;

sabesansathananthan

import React, { useState, useEffect } from "react";
import { fetchDailyData } from "../../api";
import { Line, Bar } from "react-chartjs-2";
import styles from "./Chart.module.css";

const Chart = ({ data: { confirmed, recovered, deaths }, country }) => {
  const [dailyData, setDailyData] = useState([]);
  useEffect(() => {
    const fetchAPI = async () => {
      setDailyData(await fetchDailyData());

sabesansathananthan

.container {
  display: flex;
  justify-content: center;
  width: 85%;
}
@media (max-width: 770px) {
  .container {
    width: 100%;
  }
  .image {