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

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

const gameDefinitions = await fetchGameDefinitions();
const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
const locale = Astro.params.locale ?? DEFAULT_LOCALE;
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>
      {
        PUBLIC_ASSET_BRANCH !== 'preview' && (
          <Text size="2" color="gray">
            WoTB
          </Text>
        )
      }
      <Text size="2" color="gray">CDN</Text>
    </Flex>

    <Flex direction="column" gap="1" flexGrow="1" flexBasis="0" align="start">
      <Code size="2" color="gray">
        {packageJson.version}
      </Code>
      {
        PUBLIC_ASSET_BRANCH !== 'preview' && (
          <Code size="2" color="gray">
            {gameDefinitions.version}
          </Code>
        )
      }
      <Code size="2" color="gray">
        {PUBLIC_ASSET_BRANCH}
      </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>

    {
      PUBLIC_ASSET_BRANCH !== 'preview' && (
        <>
          <Text size="2" color="gray">
            WoTB
          </Text>
          <Code size="2" color="gray">
            {gameDefinitions.version}
          </Code>
        </>
      )
    }

    <Text size="2" color="gray">CDN</Text>
    <Code size="2" color="gray">
      {PUBLIC_ASSET_BRANCH}
    </Code>
  </Flex>
</Flex>