feat: rework the Layout component

src/app/explorer/page.tsx

@@ -1,13 +1,13 @@
+import { Header } from "@/components/Header"
 import {
   Layout,
   LayoutBanner,
   LayoutFooter,
-  LayoutHeader,
   LayoutHeadline,
   LayoutHero,
   LayoutMain,
+  LayoutTitle,
 } from "@/components/Layout"
-import { LayoutBannerBackground } from "@/components/Layout/Layout"
 import { Anchor } from "@/components/ui/Anchor"
 import { env } from "env"
 import { unstable_serialize as infinite_unstable_serialize } from "swr/infinite"
@@ -56,15 +56,16 @@ const Page = async ({ searchParams }: { searchParams: SearchParams }) => {
       <HeaderBackground />
       <Layout>
         <LayoutHero>
-          <LayoutHeader />
-          <div id={ActiveSection.YourGuilds}>
-            <LayoutHeadline title="Guildhall" />
-          </div>
           <LayoutBanner>
-            <LayoutBannerBackground />
             <div className="absolute inset-0 bg-[auto_115%] bg-[right_top_10px] bg-[url('/banner.svg')] bg-no-repeat opacity-10" />
             <div className="absolute inset-0 bg-gradient-to-tr from-50% from-banner to-transparent" />
           </LayoutBanner>
+
+          <Header />
+
+          <LayoutHeadline id={ActiveSection.YourGuilds}>
+            <LayoutTitle>Guildhall</LayoutTitle>
+          </LayoutHeadline>
         </LayoutHero>
 
         <LayoutMain>

src/v2/components/Layout/Layout.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react"
+import { ThemeProvider } from "next-themes"
 import {
   Layout,
   LayoutBanner,
@@ -7,24 +8,36 @@ import {
   LayoutHero,
   LayoutMain,
 } from "."
-import { LayoutBannerBackground } from "./Layout"
+import { NavMenu } from "../Header/NavMenu"
+import { LayoutTitle } from "./Layout"
 
 const meta: Meta = {
-  title: "Design system/Layout",
+  title: "Guild UI/Layout",
   parameters: {
     layout: "fullscreen",
   },
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 }
 
 export default meta
 
 export const Static: StoryFn = () => (
   <Layout>
     <LayoutHero>
-      <LayoutBanner>
-        <LayoutBannerBackground />
-      </LayoutBanner>
-      <LayoutHeadline title="Layout title" />
+      <LayoutBanner />
+      <header className="relative flex h-16 w-full items-center justify-between p-2">
+        <NavMenu />
+      </header>
+      <LayoutHeadline>
+        <div className="size-20 rounded-full bg-background"></div>
+        <LayoutTitle>Layout title</LayoutTitle>
+      </LayoutHeadline>
     </LayoutHero>
     <LayoutMain>Page contents</LayoutMain>
     <LayoutFooter />

src/v2/components/Layout/Layout.tsx

@@ -1,125 +1,98 @@
 import { cn } from "@/lib/utils"
 import { Slot } from "@radix-ui/react-slot"
-import clsx from "clsx"
-import { PropsWithChildren, ReactNode } from "react"
-import { forwardRef } from "react"
+import { HTMLAttributes, forwardRef } from "react"
 
-/* -------------------------------------------------------------------------------------------------
- * Layout
- * -----------------------------------------------------------------------------------------------*/
-
-interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-const Layout = ({ children, ...props }: LayoutProps) => (
+const Layout = ({ children, ...props }: HTMLAttributes<HTMLDivElement>) => (
   <div className="flex min-h-screen flex-col" {...props}>
     {children}
   </div>
 )
 
-/* -------------------------------------------------------------------------------------------------
- * LayoutContainer
- * -----------------------------------------------------------------------------------------------*/
-
-interface LayoutContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {
   asChild?: boolean
 }
 
 const LayoutContainer = forwardRef<HTMLDivElement, LayoutContainerProps>(
-  ({ children, className, asChild = false }, ref) => {
+  ({ children, className, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "div"
     return (
       <Comp
-        className={clsx("mx-auto max-w-screen-lg px-4 sm:px-8 md:px-10", className)}
+        className={cn(
+          "mx-auto w-full max-w-screen-lg px-4 sm:px-8 md:px-10",
+          className
+        )}
         ref={ref}
+        {...props}
       >
         {children}
       </Comp>
     )
   }
 )
 
-/* -------------------------------------------------------------------------------------------------
- * LayoutHero
- * -----------------------------------------------------------------------------------------------*/
-
-const LayoutHero = ({ children }: PropsWithChildren) => (
-  <div className="relative">{children}</div>
+const LayoutHero = ({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("relative pb-40", className)} {...props}>
+    {children}
+  </div>
 )
 
-/* -------------------------------------------------------------------------------------------------
- * LayoutHeadline
- * -----------------------------------------------------------------------------------------------*/
-
-interface LayoutHeadlineProps {
-  title: ReactNode
-}
-
-const LayoutHeadline = ({ title }: LayoutHeadlineProps) => (
-  <LayoutContainer>
-    <h1 className="pt-9 pb-14 font-bold font-display text-4xl text-white tracking-tight sm:text-5xl">
-      {title}
-    </h1>
-  </LayoutContainer>
+const LayoutBanner = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("-z-10 absolute inset-0 overflow-hidden bg-banner", className)}
+    {...props}
+  />
 )
 
-/* -------------------------------------------------------------------------------------------------
- * LayoutBannerBackground
- * -----------------------------------------------------------------------------------------------*/
-
-interface LayoutBannerBackgroundProps {
-  className?: string
-}
-
-const LayoutBannerBackground = ({ className }: LayoutBannerBackgroundProps) => (
-  <div className={cn("absolute inset-0 bg-banner", className)} />
+const LayoutHeadline = ({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <LayoutContainer
+    className={cn("mt-6 flex items-center gap-5 md:mt-9", className)}
+    {...props}
+  >
+    {children}
+  </LayoutContainer>
 )
 
-/* -------------------------------------------------------------------------------------------------
- * LayoutBanner
- * -----------------------------------------------------------------------------------------------*/
-
-interface LayoutBannerProps extends PropsWithChildren {
-  className?: string
-}
-
-const LayoutBanner = ({ children, className }: LayoutBannerProps) => (
-  <div
+const LayoutTitle = ({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) => (
+  <h1
     className={cn(
-      "-z-10 -bottom-28 absolute inset-x-0 top-0 overflow-hidden",
+      "font-bold font-display text-4xl text-white tracking-tight sm:text-5xl",
       className
     )}
+    {...props}
   >
     {children}
-  </div>
+  </h1>
 )
 
-/* -------------------------------------------------------------------------------------------------
- * LayoutMain
- * -----------------------------------------------------------------------------------------------*/
-
-const LayoutMain = ({ children, ...props }: LayoutContainerProps) => (
-  <main>
-    <LayoutContainer {...props}>{children}</LayoutContainer>
-  </main>
+const LayoutMain = ({ children, className, ...props }: LayoutContainerProps) => (
+  <LayoutContainer className={cn("-top-28 relative", className)} {...props} asChild>
+    <main>{children}</main>
+  </LayoutContainer>
 )
 
-/* -------------------------------------------------------------------------------------------------
- * LayoutFooter
- * -----------------------------------------------------------------------------------------------*/
-
-const LayoutFooter = ({ children, ...props }: LayoutContainerProps) => (
-  <footer className="mt-auto">
-    <LayoutContainer {...props}>{children}</LayoutContainer>
-  </footer>
+const LayoutFooter = ({ children, className, ...props }: LayoutContainerProps) => (
+  <LayoutContainer className={cn("mt-auto", className)} {...props} asChild>
+    <footer>{children}</footer>
+  </LayoutContainer>
 )
 
-/* -----------------------------------------------------------------------------------------------*/
-
 export {
   LayoutBanner,
-  LayoutBannerBackground,
   LayoutFooter,
   LayoutHeadline,
+  LayoutTitle,
   LayoutHero,
   LayoutMain,
   LayoutContainer,

src/v2/components/Layout/index.ts

@@ -1,8 +1,9 @@
-export { Header as LayoutHeader } from "@/components/Header"
+// biome-ignore lint/performance/noBarrelFile: <explanation>
 export {
   LayoutBanner,
   LayoutFooter,
   LayoutHeadline,
+  LayoutTitle,
   LayoutHero,
   LayoutMain,
   Layout,