2022-05-21 19:25:49 +02:00
|
|
|
import {useTranslation} from "react-i18next";
|
2023-02-06 18:01:33 +01:00
|
|
|
import {Card} from "react-bootstrap";
|
2022-05-21 19:25:49 +02:00
|
|
|
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
|
|
|
|
import {faClock} from "@fortawesome/free-regular-svg-icons";
|
|
|
|
import WorldPie from "../../graphs/WorldPie";
|
|
|
|
import React from "react";
|
2022-09-03 18:39:39 +02:00
|
|
|
import {CardLoader} from "../../navigation/Loader";
|
2022-05-21 19:25:49 +02:00
|
|
|
|
|
|
|
const WorldPieCard = ({worldSeries, gmSeries}) => {
|
|
|
|
const {t} = useTranslation();
|
2022-08-19 18:03:02 +02:00
|
|
|
|
2022-09-03 18:39:39 +02:00
|
|
|
if (!worldSeries || !gmSeries) return <CardLoader/>;
|
2022-08-19 18:03:02 +02:00
|
|
|
|
2022-05-21 19:25:49 +02:00
|
|
|
return (
|
|
|
|
<Card>
|
|
|
|
<Card.Header>
|
|
|
|
<h6 className="col-black" style={{width: '100%'}}>
|
|
|
|
<Fa icon={faClock} className="col-teal"/> {t('html.label.worldPlaytime')}
|
|
|
|
</h6>
|
|
|
|
</Card.Header>
|
|
|
|
<WorldPie
|
|
|
|
id="world-pie"
|
|
|
|
worldSeries={worldSeries}
|
|
|
|
gmSeries={gmSeries}
|
|
|
|
/>
|
|
|
|
</Card>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default WorldPieCard;
|