50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import styled from 'styled-components';
|
|
import { Card } from 'components/Form/Card';
|
|
import Row from 'components/Form/Row';
|
|
import colors from 'styles/colors';
|
|
|
|
const LearnMoreInfo = styled.p`
|
|
font-size: 0.8rem;
|
|
margin-top: 0.5rem;
|
|
opacity: 0.75;
|
|
a { color: ${colors.primary}; }
|
|
`;
|
|
|
|
const CarbonCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
|
|
const carbons = props.data.statistics;
|
|
const initialUrl = props.data.scanUrl;
|
|
|
|
const [carbonData, setCarbonData] = useState<{c?: number, p?: number}>({});
|
|
|
|
useEffect(() => {
|
|
const fetchCarbonData = async () => {
|
|
try {
|
|
const response = await fetch(`https://api.websitecarbon.com/b?url=${encodeURIComponent(initialUrl)}`);
|
|
const data = await response.json();
|
|
setCarbonData(data);
|
|
} catch (error) {
|
|
console.error('Error fetching carbon data:', error);
|
|
}
|
|
};
|
|
fetchCarbonData();
|
|
}, [initialUrl]);
|
|
|
|
return (
|
|
<Card heading={props.title} actionButtons={props.actionButtons}>
|
|
{ (!carbons?.adjustedBytes && !carbonData.c) && <p>Unable to calculate carbon footprint for host</p>}
|
|
{ carbons?.adjustedBytes > 0 && <>
|
|
<Row lbl="HTML Initial Size" val={`${carbons.adjustedBytes} bytes`} />
|
|
<Row lbl="CO2 for Initial Load" val={`${(carbons.co2.grid.grams * 1000).toPrecision(4)} grams`} />
|
|
<Row lbl="Energy Usage for Load" val={`${(carbons.energy * 1000).toPrecision(4)} KWg`} />
|
|
</>}
|
|
{carbonData.c && <Row lbl="CO2 Emitted" val={`${carbonData.c} grams`} />}
|
|
{carbonData.p && <Row lbl="Better than average site by" val={`${carbonData.p}%`} />}
|
|
<br />
|
|
<LearnMoreInfo>Learn more at <a href="https://www.websitecarbon.com/">websitecarbon.com</a></LearnMoreInfo>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default CarbonCard;
|