Start migrating pages

src/components/Widget.astro

@@ -1,4 +1,6 @@
 ---
+import { styles } from "../lib/theme"
+
 export interface Props {
   title?: string
   label?: string
@@ -7,7 +9,7 @@ export interface Props {
 const { title, label } = Astro.props
 ---
 
-<div class="relative overflow-auto rounded-lg border border-gray-800/80 bg-gray-800/30 p-3 backdrop-blur-md sm:p-4">
+<div class:list={[styles.box.base, "relative overflow-auto p-3 sm:p-4"]}>
   <div class="sticky left-0 top-0 flex flex-wrap items-center gap-x-5 gap-y-1">
     <h3 class="font-display flex-auto text-lg font-bold text-gray-200">
       {title}

src/components/layout/Box.astro

@@ -1,3 +1,7 @@
-<div class="bg-gray-900/70 border border-gray-800/50 rounded-none md:rounded-xl min-h-52 -mx-4 md:mx-0">
+---
+import { styles } from "../../lib/theme"
+---
+
+<div class:list={[styles.box.base, "min-h-52"]}>
   <slot />
 </div>

src/components/layout/HeaderContent.astro

@@ -10,9 +10,14 @@ const { title, section } = Astro.props
 ---
 
 <div class:list={[styles.layout.container, styles.layout.containerPadding]}>
-  <div class="py-12">
-    {section && <p class="mb-2 text-base font-bold text-white/60">{section}</p>}
-    {title && <h1 class="text-xl font-black text-white/90 md:text-3xl">{title}</h1>}
-    <slot />
+  <div class="py-4 flex items-center">
+    <div class="flex-auto py-4">
+      {section && <p class="mb-2 text-base font-bold text-white/60">{section}</p>}
+      {title && <h1 class="text-xl font-black text-white/90 md:text-3xl">{title}</h1>}
+      <slot />
+    </div>
+    <div>
+      <slot name="actions" />
+    </div>
   </div>
 </div>

src/components/layout/MainNav.astro

@@ -13,7 +13,7 @@ const navLinks = [
 ---
 
 <div
-  class="to-black-20 relative z-10 h-20 w-full border-b border-white/10 bg-gradient-to-r from-black/20 via-black/5 mix-blend-screen md:h-16"
+  class="sticky top-0 to-black-20 backdrop-blur z-10 h-20 w-full border-b border-white/5 bg-gradient-to-r from-black/40 via-black/25 mix-blend-screen md:h-16"
 >
   <nav
     class:list={[

src/lib/theme.ts

@@ -4,6 +4,9 @@ export const styles = {
     container: `mx-auto max-w-screen-xl`,
     gap: `gap-4 md:gap-6`,
   },
+  box: {
+    base: `bg-gray-900/70 border border-gray-800/50 rounded-none md:rounded-xl -mx-4 md:mx-0`
+  },
   button: {
     base: `inline-flex items-center justify-center rounded-sm
             bg-gray-800/85 border border-gray-700 backdrop-blur-sm

src/pages/players/[id]-[username].astro

@@ -1,6 +1,9 @@
 ---
 export const prerender = false
-import Layout from "../../layouts/Layout.astro"
+import Layout from "../../layouts/New.astro"
+import Header from "../../components/layout/Header.astro"
+import HeaderContent from "../../components/layout/HeaderContent.astro"
+
 import Widget from "../../components/Widget.astro"
 import { Image } from "astro:assets"
 import infernals from "../../assets/game/factions/infernals-small.png"
@@ -13,6 +16,10 @@ import PlayerMatchupStats from "../../components/widgets/PlayerMatchupStats.astr
 import PlayerGameLengthStats from "../../components/widgets/PlayerGameLengthStats.astro"
 import PlayerOpponents from "../../components/widgets/PlayerOpponents.astro"
 import { styles } from "../../lib/theme"
+import HeaderMeta from "../../components/layout/HeaderMeta.astro"
+import Section from "../../components/layout/Section.astro"
+import Main from "../../components/layout/Main.astro"
+import Sidebar from "../../components/layout/Sidebar.astro"
 
 type Theme = keyof typeof styles.badges
 
@@ -45,32 +52,36 @@ const highestLeague = player?.leaderboard_entries?.reduce(
 )
 ---
 
-<Layout title={player?.nickname}>
-  <div class="w-full border-b border-gray-700/50 bg-gray-800/50 backdrop-blur-lg">
-    <div class="mx-auto flex max-w-screen-lg flex-wrap items-center gap-4 px-4 py-4 md:px-8">
-      <div class="flex flex-auto items-center gap-3">
+<Layout title={player?.nickname!}>
+  <Header>
+    <HeaderContent section="Players">
+      <div class="flex items-center gap-3">
         {player.avatar_url && <img src={player.avatar_url} alt={player.nickname} class="w-6 rounded-sm md:w-8" />}
-        <h1 class="flex-auto text-lg font-bold text-gray-50 md:text-2xl">{player.nickname}</h1>
+        <h1 class="text-xl font-black text-white/90 md:text-3xl">{player.nickname}</h1>
       </div>
-      <RankedBadge entry={highestLeague} class="w-16 md:w-20" client:load />
-    </div>
-  </div>
-  <section class="relative mx-auto flex max-w-screen-lg flex-col gap-6 px-4 py-8 md:px-7 lg:flex-row">
-    <div class="flex-auto">
-      <Widget title="Recent Matches" label="Closed Beta Ranked">
-        <div class="">
-          {playerMatches.matches.map((match) => <MatchPreview match={match} mainPlayerId={playerId} />)}
-        </div>
-      </Widget>
-    </div>
-    <div class="order-first flex basis-1/4 flex-col gap-6 sm:flex-row lg:order-none lg:flex-col">
+      <div slot="actions">
+        <RankedBadge entry={highestLeague} class="w-16 md:w-20" client:load />
+      </div>
+    </HeaderContent>
+    <HeaderMeta
+      items={[
+        {
+          icon: import("lucide-static/icons/activity.svg?raw"),
+          label: `Last Match ${new Date(player.last_match_ended_at!).toLocaleDateString()}`,
+        },
+        { icon: import("lucide-static/icons/hash.svg?raw"), label: player.id },
+      ]}
+    />
+  </Header>
+  <Section>
+    <Main>
       <Widget title="Top Ranks">
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-row gap-2 -mx-2">
           {
             player.leaderboard_entries.map((entry) => (
               <div
                 class:list={[
-                  "rounded-lg pl-3 pr-1 py-2 -mx-2 flex items-center gap-3 text-sm sm:text-base",
+                  "flex-auto rounded-lg pl-3 pr-1 py-2 flex items-center gap-3 text-sm sm:text-base",
                   styles.badges[entry.race as Theme].badge,
                 ]}
               >
@@ -100,30 +111,20 @@ const highestLeague = player?.leaderboard_entries?.reduce(
           }
         </div>
       </Widget>
-      <div class="hidden sm:block">
-        {playerActivity?.history && <PlayerActivity activity={playerActivity} {player} />}
-      </div>
-      <div class="hidden lg:block">
-        {playerMatchupStats.matchups.length > 0 && <PlayerMatchupStats playerMatchupStats={playerMatchupStats} />}
-      </div>
-      <div class="hidden lg:block">
-        {playerMatchupStats.matchups.length > 0 && <PlayerGameLengthStats playerMatchupStats={playerMatchupStats} />}
-      </div>
-      <div class="hidden lg:block">
-        {playerOpponents.opponents.length > 0 && <PlayerOpponents opponents={playerOpponents} />}
-      </div>
-    </div>
-    <div class="sm:hidden">
+      <Widget title="Recent Matches" label="Closed Beta Ranked">
+        <div class="">
+          {playerMatches.matches.map((match) => <MatchPreview match={match} mainPlayerId={playerId} />)}
+        </div>
+      </Widget>
+    </Main>
+    <Sidebar>
       {playerActivity?.history && <PlayerActivity activity={playerActivity} {player} />}
-    </div>
-    <div class="lg:hidden">
+
       {playerMatchupStats.matchups.length > 0 && <PlayerMatchupStats playerMatchupStats={playerMatchupStats} />}
-    </div>
-    <div class="lg:hidden">
+
       {playerMatchupStats.matchups.length > 0 && <PlayerGameLengthStats playerMatchupStats={playerMatchupStats} />}
-    </div>
-    <div class="lg:hidden">
+
       {playerOpponents.opponents.length > 0 && <PlayerOpponents opponents={playerOpponents} />}
-    </div>
-  </section>
+    </Sidebar>
+  </Section>
 </Layout>