Updates badges

web/src/components/Badge.tsx

@@ -0,0 +1,25 @@
+type BadgeProps = {
+ children: string;
+ type?: 'default' | 'warning';
+ className?: string;
+};
+
+export default function Badge({ children, type = 'default', className }: BadgeProps) {
+ // set background and text color classes depending on type
+ const bgColorClasses = {
+ default: 'bg-gray-300 dark:bg-gray-400',
+ warning: 'bg-yellow-400 dark:bg-yellow-500',
+ }[type];
+ const textColorClasses = {
+ default: 'text-gray-800/75 dark:text-gray-900',
+ warning: 'text-yellow-900/95 dark:text-gray-900/95',
+ }[type];
+
+ return (
+ <span
+ className={`rounded-full py-[1px] px-2 text-xs font-medium ${bgColorClasses} ${textColorClasses} ${className}`}
+ >
+ {children}
+ </span>
+ );
+}

web/src/features/panels/Zone/CountryTag.tsx

@@ -14,14 +14,14 @@ const getCountryName = (zoneId: string) => {
 export function CountryTag({ zoneId }: { zoneId: string }) {
  const countryName = getCountryName(zoneId);
  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
- const isACountry = zoneId.length === 2; // TODO: set up proper method to check if zoneId is a country
+ const isACountry = zoneId !== 'US' && zoneId.length === 2; // TODO: set up proper method to check if zoneId is a country
 
  if (isACountry) {
  return <CountryFlag zoneId={zoneId} flagSize={16} className="inline-flex" />;
  }
 
  return (
- <span className="inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0 text-xs">
+ <span className="inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0.5 text-xs dark:bg-gray-900">
  <CountryFlag zoneId={zoneId} flagSize={16} />
  <span>{countryName}</span>
  </span>

web/src/features/panels/Zone/ZoneDetails.tsx

@@ -22,7 +22,7 @@ export default function ZoneDetails(): JSX.Element {
 
  return (
  <div>
- <ZoneHeader zoneId={zoneId} date="" isEstimated isAggregated />
+ <ZoneHeader zoneId={zoneId} date="November 9, 2022 at 8:00" isEstimated isAggregated />
  {status === 'loading' && 'Loading...'}
  </div>
  );

web/src/features/panels/Zone/ZoneHeader.tsx

@@ -1,36 +1,31 @@
+import Badge from 'components/Badge';
 import CarbonIntensitySquare from 'components/CarbonIntensitySquare';
 import { CircularGauge } from 'components/CircularGauge';
 import { CountryTag } from './CountryTag';
 import ZoneHeaderTitle from './ZoneHeaderTitle';
 
 interface ZoneHeaderProps {
  zoneId: string;
+ date: string;
+ isEstimated?: boolean;
+ isAggregated?: boolean;
 }
 
-export function ZoneHeader(props: ZoneHeaderProps) {
- const { zoneId } = props;
- // TODO: use correct zoneId
-
+export function ZoneHeader({ date, zoneId, isEstimated, isAggregated }: ZoneHeaderProps) {
  return (
  <div className="mt-1 grid w-full gap-y-5 sm:pr-4">
  <ZoneHeaderTitle
- title="Western Area Power Administration Rocky Mountain Region "
- formattedDate="November 9, 2022 at 8:00"
+ title="Western Area Power Administration Rocky Mountain Region"
+ formattedDate={date}
  labels={[
- <div
- key="estimated-label"
- className="w-18 rounded-full bg-yellow-400 px-2 text-center text-xs"
- >
- Estimated
- </div>,
- <div
- key="aggregated-label"
- className="w-20 rounded-full bg-gray-400 px-2 text-center text-xs text-white"
- >
- Aggregated
- </div>,
+ isEstimated && (
+ <Badge type="warning" key={'badge-est'}>
+ Estimated
+ </Badge>
+ ),
+ isAggregated && <Badge key={'badge-agg'}>Aggregated</Badge>,
  ]}
- countryTag={<CountryTag zoneId={'US-NW-WACM'} />}
+ countryTag={<CountryTag zoneId={'US-MISO'} />}
  />
  <div className="flex flex-row justify-evenly">
  <CarbonIntensitySquare co2intensity={60} withSubtext />

web/src/features/panels/Zone/ZoneHeaderTitle.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 interface ZoneHeaderTitleProps {
  title: string;
  formattedDate: string;
- labels?: React.ReactElement[];
+ labels?: (false | JSX.Element | undefined)[];
  countryTag?: React.ReactElement;
 }
 
@@ -14,15 +14,18 @@ export default function ZoneHeaderTitle({
  countryTag,
 }: ZoneHeaderTitleProps) {
  // TODO: add correct icon
+ // TODO: Align title and countryTag vertically, while keeping the tag
+ // "wrapped" in the title. Also add gap between title and countryTag.
+
  return (
  <div className="flex flex-row pl-2">
  <Link className="mr-4 self-center text-3xl text-gray-400" to="/">
  {'❮'}
  </Link>
  <div>
- <h2 className="text-md mb-1 text-base font-medium">
+ <h2 className="text-md mb-0.5 space-x-1.5 text-base font-medium">
  <span>{title}</span>
- <span> {countryTag}</span>
+ {countryTag}
  </h2>
  <div className="flex flex-wrap items-center gap-1 text-center">
  {labels}