feat: some footer

packages/website-ue/src/components/BaseStyles.astro

@@ -20,10 +20,14 @@ import "@fontsource-variable/roboto-flex";
 
     --font-size-regular: 1rem;
     --font-size-minor: 0.75rem;
+    --font-size-major: 1.25rem;
 
     --font-family-regular: "Roboto Flex Variable", sans-serif;
     --font-family-mono: "JetBrains Mono Variable", monospace;
 
+    --color-regular: var(--gray-12);
+    --color-low-contrast: var(--gray-11);
+
     --weight-light: 300;
     --weight-regular: 400;
     --weight-medium: 500;

packages/website-ue/src/components/Footer.astro

@@ -1,20 +1,75 @@
+---
+import packageJson from "../../../../package.json";
+import { api } from "../core/api/dynamic";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
+import { Text } from "./Text";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
 <style>
   .footer {
     display: flex;
     justify-content: center;
 
     margin-top: calc(var(--space-4) * -1);
-    padding: var(--space-6) var(--space-4);
+    padding: var(--space-5) var(--space-5);
 
     background-color: var(--gray-3);
+    color: var(--color-low-contrast);
 
     .content {
       flex: 1;
       max-width: 52rem;
+
+      .logo {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .icon {
+          width: var(--space-6);
+          height: var(--space-6);
+        }
+
+        .info {
+          display: flex;
+          flex-direction: column;
+          align-items: end;
+          gap: var(--space-1);
+        }
+      }
     }
   }
+
+  .footer-spacer {
+    flex: 1;
+  }
 </style>
 
+<div class="footer-spacer"></div>
+
 <div class="footer">
-  <div class="content">poopy</div>
+  <div class="content">
+    <div class="logo">
+      <BlitzKitIcon className="icon" />
+
+      <div class="info">
+        <Text lowContrast weight="medium" size="major">
+          {strings.common.name}
+        </Text>
+
+        <Code>
+          {packageJson.version}
+        </Code>
+      </div>
+    </div>
+  </div>
 </div>

packages/website-ue/src/components/Text/index.css

@@ -5,6 +5,10 @@
     font-size: var(--font-size-minor);
   }
 
+  &[data-size="major"] {
+    font-size: var(--font-size-major);
+  }
+
   &[data-weight="light"] {
     font-weight: var(--weight-light);
   }

packages/website-ue/src/components/Text/index.tsx

@@ -7,7 +7,7 @@ export interface TextProps extends ComponentProps<"span"> {
   color?: Color;
   weight?: "light" | "regular" | "medium" | "bold" | "black";
   lowContrast?: boolean;
-  size?: "regular" | "minor";
+  size?: "regular" | "minor" | "major";
 }
 
 export function Text({

packages/website-ue/src/layouts/BaseLayout.astro

@@ -8,11 +8,12 @@ import Navbar from "../components/Navbar.astro";
 import type { Color } from "../core/ui/color";
 
 interface Props {
+  locale: string;
   accent: Color;
   noNavbar?: boolean;
 }
 
-const { accent, noNavbar } = Astro.props;
+const { accent, noNavbar, locale } = Astro.props;
 ---
 
 <html>
@@ -35,6 +36,7 @@ const { accent, noNavbar } = Astro.props;
         display: flex;
         flex-direction: column;
         gap: var(--space-5);
+        min-height: 100dvh;
 
         background-color: var(--gray-1);
         color: var(--gray-12);
@@ -50,6 +52,6 @@ const { accent, noNavbar } = Astro.props;
 
     <slot />
 
-    <Footer />
+    <Footer {locale} />
   </body>
 </html>

packages/website-ue/src/pages/[...locale]/avatars/_index.tsx

@@ -0,0 +1,5 @@
+interface Props {
+  skeleton?: boolean;
+}
+
+export function Page({ skeleton }: Props) {}

packages/website-ue/src/pages/[...locale]/avatars/index.astro

@@ -1,41 +1,14 @@
 ---
-import { ProfileAvatarComponent_Category } from "@protos/blitz_static_profile_avatar_component";
-import { Grade } from "@protos/blitz_static_standard_grades_enum";
-import { api } from "../../../core/api/dynamic";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { Page } from "./_index";
 
 export { getStaticPaths } from "../index.astro";
 
-const { avatars } = await api.avatars();
+const { locale } = Astro.props;
 ---
 
-<BaseLayout accent="gold">
+<BaseLayout {locale} accent="gold">
-  {
+  <Page client:only="react">
-    avatars.map((avatar) => {
+    <Page skeleton slot="fallback" />
-      return (
+  </Page>
-        <>
-          <h3>
-            {avatar.stuff_ui!.display_name} {Grade[avatar.stuff_ui!.grade]}{" "}
-            {ProfileAvatarComponent_Category[avatar.profile_avatar!.category]}
-          </h3>
-
-          {avatar.stuff_ui!.description && (
-            <p>{avatar.stuff_ui!.description}</p>
-          )}
-          {avatar.stuff_ui!.obtaining_methods && (
-            <p>{avatar.stuff_ui!.obtaining_methods}</p>
-          )}
-          {avatar.stuff_ui!.features && <p>{avatar.stuff_ui!.features}</p>}
-
-          <img width="128" src={`/api/avatars/${avatar.name}.webp`} />
-
-          {avatar.sellable && (
-            <pre>{JSON.stringify(avatar.sellable, null, 2)}</pre>
-          )}
-
-          <br />
-        </>
-      );
-    })
-  }
 </BaseLayout>