blitzkit/packages/website/src/components/Footer.astro

---
import { assertSecret } from "@blitzkit/core";
import { Box, Code, Flex, Heading, Link, Text } from "@radix-ui/themes";
import packageJson from "../../../../package.json";
import { api } from "../core/blitzkit/api";
import { getStrings } from "../core/i18n/getStrings";
import { LinkI18n } from "./LinkI18n";
import { LocaleSwitcherThemeWrapper } from "./LocaleSwitcher";

export interface Props {
  locale: string;
}

const gameDefinitions = await api.gameDefinitions();
const gameVersion = gameDefinitions.version.split("_")[0];
const environment = assertSecret(import.meta.env.PUBLIC_ENVIRONMENT);
const { locale } = Astro.props;
const strings = getStrings(locale);
---

<style>
  .footer {
    background-color: var(--color-panel);
  }
</style>

<Flex className="footer" gap="6" p="6" direction="column" align="center">
  <Flex
    align="center"
    justify="between"
    maxWidth="40rem"
    width="100%"
    flexGrow="1"
    gap="5"
    position="relative"
    direction={{ initial: "column", sm: "row" }}
  >
    <Flex
      direction="column"
      align={{
        initial: "center",
        sm: "start",
      }}
    >
      <Heading>BlitzKit</Heading>
      <Text color="gray">{strings.website.footer.motto}</Text>
      <Text size="1" color="gray">
        {strings.website.footer.copyright}
      </Text>

      <Box mt="2">
        <LocaleSwitcherThemeWrapper {locale} client:load />
      </Box>
    </Flex>

    <Flex
      gap="6"
      width={{
        initial: "100%",
        sm: "auto",
      }}
    >
      <Flex
        direction="column"
        gap="1"
        align={{
          initial: "end",
          sm: "start",
        }}
        flexGrow={{
          initial: "1",
          sm: "0",
        }}
        flexBasis={{
          initial: "0",
          sm: "auto",
        }}
      >
        <Heading size="3">{strings.website.footer.about.title}</Heading>
        <Flex
          direction="column"
          align={{
            initial: "end",
            sm: "start",
          }}
        >
          <LinkI18n {locale} href="/docs/about/credits" color="gray">
            {strings.website.footer.about.credits}
          </LinkI18n>
          <Link
            href="https://discord.gg/nDt7AjGJQH"
            target="_blank"
            color="gray"
          >
            {strings.website.footer.about.discord}
          </Link>
          <Link
            href="https://github.com/tresabhi/blitzkit"
            target="_blank"
            color="gray"
          >
            {strings.website.footer.about.github}
          </Link>
          <LinkI18n {locale} href="/docs/patches" color="gray">
            {strings.website.footer.about.patches}
          </LinkI18n>
        </Flex>
      </Flex>

      <Flex
        direction="column"
        gap="1"
        flexGrow={{
          initial: "1",
          sm: "0",
        }}
        flexBasis={{
          initial: "0",
          sm: "auto",
        }}
      >
        <Heading size="3">{strings.website.footer.legal.title}</Heading>
        <Flex direction="column">
          <LinkI18n {locale} href="/docs/legal/privacy-policy" color="gray">
            {strings.website.footer.legal.privacy}
          </LinkI18n>
          <LinkI18n {locale} href="/docs/legal/terms-of-service" color="gray">
            {strings.website.footer.legal.terms}
          </LinkI18n>
        </Flex>
      </Flex>
    </Flex>
  </Flex>

  <Flex gap="5" display={{ initial: "flex", sm: "none" }} width="100%">
    <Flex direction="column" gap="1" flexGrow="1" flexBasis="0" align="end">
      <Text size="2" color="gray">BlitzKit</Text>
      {
        environment !== "preview" && (
          <Text size="2" color="gray">
            WoTB
          </Text>
        )
      }
      <Text size="2" color="gray">Branch</Text>
    </Flex>

    <Flex direction="column" gap="1" flexGrow="1" flexBasis="0" align="start">
      <Code size="2" color="gray">
        {packageJson.version}
      </Code>
      {
        environment !== "preview" && (
          <Code size="2" color="gray">
            {gameVersion}
          </Code>
        )
      }
      <Code size="2" color="gray">
        {environment}
      </Code>
    </Flex>
  </Flex>

  <Flex gap="2" align="center" display={{ initial: "none", sm: "flex" }}>
    <Text size="2" color="gray">BlitzKit</Text>
    <Code size="2" color="gray">
      {packageJson.version}
    </Code>

    {
      environment !== "preview" && (
        <>
          <Text size="2" color="gray">
            WoTB
          </Text>
          <Code size="2" color="gray">
            {gameVersion}
          </Code>
        </>
      )
    }

    <Text size="2" color="gray">Branch</Text>
    <Code size="2" color="gray">
      {environment}
    </Code>
  </Flex>
</Flex>