Aiminaabee

5. Storefront layout

Build the two-column layout that wraps the checkout steps.

On this page

In this step, you'll implement the general layout of the storefront. The storefront will have a simple two-column layout, with one column showing the current page's content, and another showing the current region and allowing the customer to change it.

Create Second Column

Before creating the layout, you'll create the second column that's consistent across pages.

To create the component, create the file components/SecondCol/index.tsx with the following content:

Directory structure after creating second column file

tsx

tsxCopy
"use client"


import { clx } from "@aiminaabeejs/admin-ui"
import { useRegion } from "@/providers/region"


export const SecondCol = () => {
  const { region, regions, setRegion } = useRegion()


  return (
    <div className={clx(
      "flex flex-col justify-center items-center gap-6",
      "lg:w-1/2 w-full"
    )}>
      <div className="flex flex-col justify-center gap-1">
        <span className="text-xs text-ui-fg-subtle">
          Powered by
        </span>
        <span className="text-sm font-medium">Aiminaabee</span>
      </div>
      <div className="flex justify-center gap-1">
        <span className="text-sm text-ui-fg-muted">
          Region:
        </span>
        <select
          value={region?.id}
          onChange={(e) => {
            const selectedRegion = regions.find(
              (r) => r.id === e.target.value
            )
            setRegion(selectedRegion)
          }}
          className={clx(
            "text-sm text-ui-fg-subtle",
            "select"
          )}
        >
          {regions.map((r) => (
            <option key={r.id} value={r.id}>
              {r.name}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}

You create a SecondCol component that shows the Aiminaabee logo and a dropdown to change the selected region. You use the useRegion hook to access the region context and manage region data.

When the customer changes the selected region in the dropdown, the selected region is changed in the context, which also updates the customer cart's region.

Add Select Styling

The SecondCol component uses custom styling for the select component using the .select class.

To add that styling, replace the content of app/globals.css with the following content:

css

cssCopy
@tailwind base;
@tailwind components;
@tailwind utilities;


.select {
  @apply appearance-none border-none bg-no-repeat pr-4;
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.6666 10L7.99994 13.3333L11.3333 10" stroke="%239CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.6666 5.99993L7.99994 2.6666L11.3333 5.99993" stroke="%239CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 16px;
  background-position: right top 50%;
  background-color: transparent;
}

Create Layout Component

Next, you'll create the layout component that wraps the storefront pages with the general layout. Replace the content of the file components/Layout/index.tsx with the following content:

tsx

tsxCopy
import { clx } from "@aiminaabeejs/admin-ui"
import { Inter, Roboto_Mono } from "next/font/google"
import { RegionProvider } from "@/providers/region"
import "./globals.css"
import { SecondCol } from "../components/SecondCol"
import { CartProvider } from "@/providers/cart"


export const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  weight: ["400", "500"],
})


export const robotoMono = Roboto_Mono({
  subsets: ["latin"],
  variable: "--font-roboto-mono",
})


export default function Layout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html className={clx(inter.variable, robotoMono.variable)}>
      <body className="bg-ui-bg-subtle w-full h-full">
        <div className={clx(
          "flex justify-center items-center min-h-screen w-full"
        )}>
          <RegionProvider>
            <CartProvider>
              <div className={clx(
                "flex gap-2 lg:my-16 my-4",
                "lg:w-[758px] lg:mx-auto w-full mx-4"
              )}>
                <div className="flex flex-col gap-2 lg:w-1/2 w-full">
                  {children}
                </div>
                <SecondCol />
              </div>
            </CartProvider>
          </RegionProvider>
        </div>
      </body>
    </html>
  )
}

You change the layout component to wrap the storefront's components with the RegionProvider and CartProvider components. You also add two-column styling, always showing the SecondCol component on the right side of the page.

This layout will wrap all pages you create next.

Next: 6. Checkout page