GitFOSS

// 3rd-party
import React from "react";
import styled, { css } from "styled-components";
// app
import type { WithThemeSchemeProp } from "../types";
import { NamedColors } from "../utils/style";
// app components
import { Chip } from "./Chip";
import { Grid } from "./Grid";

export interface CountersRowProps {
  labels: Array<{
    label: string;
    counter: number;
    href?: string;
    active?: boolean;
  }>;
}

export const CountersRow = ({
  themeScheme,
  labels,
}: WithThemeSchemeProp & CountersRowProps) => {
  return (
    <Grid.Col
      fluid
      style={{
        padding: "12px 0",
        borderBottom: `1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]}`,
      }}
    >
      <Grid.Row
        fluid
        alignItems={"center"}
        gap={12}
        style={{ padding: "0 8px" }}
      >
        {labels.map(({ label, counter, href = "#", active = false }) => (
          <StyledLabelAnchor
            href={href}
            active={active}
            themeScheme={themeScheme}
          >
            <Grid.Row nowrap gap={8} alignItems={"center"}>
              <StyledLabelText themeScheme={themeScheme}>
                {label}
              </StyledLabelText>
              <Chip themeScheme={themeScheme}>{counter}</Chip>
            </Grid.Row>
          </StyledLabelAnchor>
        ))}
      </Grid.Row>
    </Grid.Col>
  );
};

const StyledLabelAnchor = styled.a<WithThemeSchemeProp & { active?: boolean }>`
  ${({ themeScheme, active = false }) => css`
    display: flex;
    justify-content: center;
    align-items: center;

    height: 26px;
    padding: 4px 4px 4px 10px;

    font-weight: normal;
    font-family: monospace;
    text-decoration: none;

    ${active &&
    css`
      text-decoration: none;
      font-weight: bold;
      background-color: ${NamedColors.CARD[themeScheme]};
      border-radius: 14px;
    `};

    &:hover {
      text-decoration: none;
      font-weight: bold;
      background-color: ${NamedColors.CARD[themeScheme]};
      border-radius: 14px;
    }

    & ${Chip} {
      color: ${NamedColors.TEXT_MUTED[themeScheme]};
      background-color: ${NamedColors.CARD_OVERLAY[themeScheme]};
      text-decoration: none !important;
    }
  `}
`;

const StyledLabelText = styled.span<WithThemeSchemeProp & { active?: boolean }>`
  white-space: nowrap;
  font-family: monospace;
`;