Init layout components

stormgateworld · Feb 10, 2024 · 61ca249 · 61ca249
1 parent 32504d3
commit 61ca249
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 0 deletions.
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
@@ -0,0 +1,8 @@
+---
+---
+
+<div
+  class="relative -mt-20 border-b border-white/10 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-800 pt-20 md:-mt-16 md:pt-16"
+>
+  <slot />
+</div>
diff --git a/src/components/layout/HeaderContent.astro b/src/components/layout/HeaderContent.astro
@@ -0,0 +1,18 @@
+---
+import { styles } from "../../lib/theme"
+
+interface Props {
+  section?: string
+  title?: string
+}
+
+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>
+</div>
diff --git a/src/components/layout/HeaderMeta.astro b/src/components/layout/HeaderMeta.astro
@@ -0,0 +1,29 @@
+---
+import { styles } from "../../lib/theme"
+
+type MetaItem = { label: string; icon?: Promise<typeof import("*.svg?raw")> }
+interface Props {
+  items?: MetaItem[]
+}
+
+const items = await Promise.all(Astro.props.items ? Astro.props.items.map(async (item) => {
+  return {
+    ...item,
+    icon: item.icon ? (await item.icon)?.default : undefined
+  }
+}) : [])
+
+---
+
+<div class="bg-black/35">
+  <div class:list={[styles.layout.container, styles.layout.containerPadding, "flex flex-wrap items-center gap-y-4 gap-4 md:gap-8 py-4"]}>
+    {
+      items?.map(({ label, icon }) => (
+        <div class="flex items-center gap-2">
+          {icon ? <span class="text-white opacity-50  *:h-5 *:w-5" set:html={icon} /> : <></>}
+          <span class="text-white/60 text-sm font-bold">{label}</span>
+        </div>
+      ))
+    }
+  </div>
+</div>
diff --git a/src/components/layout/MainNav.astro b/src/components/layout/MainNav.astro
@@ -0,0 +1,51 @@
+---
+import { styles } from "../../lib/theme"
+const currentRoute = new URL(Astro.request.url).pathname
+const navLinks = [
+  { href: "/dev/example", text: "Home" },
+  { href: "/leaderboards/ranked_1v1", text: "Leaderboard" },
+  { href: "/stats", text: "Stats" },
+  { href: "/social", text: "Content" },
+  { href: "/api", text: "API" },
+  { href: "/tools", text: "Tools" },
+  // { href: "/creators", text: "Creators" },
+]
+---
+
+<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"
+>
+  <nav
+    class:list={[
+      styles.layout.container,
+      styles.layout.containerPadding,
+      "flex flex-wrap md:flex-nowrap items-center gap-y-2 py-2 md:min-h-16 md:py-4",
+    ]}
+  >
+    <a
+      href="/"
+      class:list={["basis-full whitespace-nowrap pr-2 text-xl font-extrabold text-white/90 md:basis-auto md:pr-8"]}
+    >
+      Stormgate World
+    </a>
+
+    <div class="scrollbar-hide -ml-2 flex max-w-full flex-auto gap-1 gap-y-2 overflow-x-auto md:ml-0 md:gap-4 md:pr-7">
+      {
+        navLinks.map(({ href, text }) => (
+          <a
+            href={href}
+            class:list={[
+              "font-extrabold rounded px-2 text-sm xs:text-base md:px-3 py-1 md:py-1.5",
+              currentRoute === href ? "bg-white/5 text-white/80" : "hover:bg-white/5 text-white/60 ",
+            ]}
+          >
+            {text}
+          </a>
+        ))
+      }
+
+      <div class="flex-auto"></div>
+      <div>{/*search etc */}</div>
+    </div>
+  </nav>
+</div>
diff --git a/src/layouts/New.astro b/src/layouts/New.astro
@@ -0,0 +1,14 @@
+---
+import Root from "./Root.astro"
+import MainNav from "../components/layout/MainNav.astro"
+export interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<Root title={title}>
+  <MainNav />
+  <slot />
+</Root>
diff --git a/src/layouts/Root.astro b/src/layouts/Root.astro
@@ -21,5 +21,11 @@ const { title } = Astro.props
   </head>
   <body class="bg-body text-body font-body scroll-pt-24 bg-gray-950 text-white antialiased">
     <slot />
+    <style is:global>
+      .scrollbar-hide {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+      }
+    </style>
   </body>
 </html>
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
@@ -1,4 +1,8 @@
 export const styles = {
+  layout: {
+    containerPadding: `px-4 md:px-6`,
+    container: `mx-auto max-w-screen-xl`,
+  },
   button: {
     base: `inline-flex items-center justify-center rounded-sm
             bg-gray-800/85 border border-gray-700 backdrop-blur-sm

diff --git a/src/pages/dev/example.astro b/src/pages/dev/example.astro
@@ -0,0 +1,54 @@
+---
+import Layout from "../../layouts/New.astro"
+import Header from "../../components/layout/Header.astro"
+import HeaderContent from "../../components/layout/HeaderContent.astro"
+import HeaderMeta from "../../components/layout/HeaderMeta.astro"
+const Box = "div",
+  HeaderNav = "div",
+  SubNav = "div",
+  Breadcrumbs = "div",
+  ContentSection: any = "div",
+  ContentHeader = "div",
+  Main = "div",
+  Sidebar = "div"
+---
+
+<Layout title="Test">
+  {
+    /* The Main Navigation is contained within Layout, the main nav is semi-transparent overlayed on top of the header. 
+        Ideally all pages have an header */
+  }
+  <Header>
+    {/* The Header contains the main gradient/color used for tinting */}
+    <HeaderNav>
+      {/* Optional, for including breadcrumbs as well as a list of subpages/tabs that are available */}
+      <Breadcrumbs />
+      <SubNav />
+    </HeaderNav>
+    <HeaderContent title={"Example Page"} section="Development">
+      {/* Very simple header, always. At most some visual and text and not too much UI */}
+      {/* Slot content can be used in plage of standard title */}
+    </HeaderContent>
+    <HeaderMeta
+      items={[
+        { icon: import("lucide-static/icons/activity.svg?raw"), label: "Last active 3 hours ago" },
+        { icon: import("lucide-static/icons/calendar.svg?raw"), label: "March 12, 2024" },
+        { icon: import("lucide-static/icons/hash.svg?raw"), label: "s83akdy" },
+      ]}
+    >
+      {/* Optional for 'stats' like last updated, last game data, user id, etc */}
+    </HeaderMeta>
+  </Header>
+  <ContentSection>
+    <ContentHeader />
+    {/* Optional, for including a title and a subtitle, as well as a description, can have slotted content and UI */}
+    <Main>
+      <Box />
+      <Box />
+    </Main>
+    <Sidebar>
+      <Box />
+      <Box />
+    </Sidebar>
+  </ContentSection>
+</Layout>