Layout Setup

Craft provides a set of layout components that make it easy to structure your pages. Here is how to use them:

Basic Layout Structure

// In your layout.tsx
import { Layout } from "@/components/ds";

export default function RootLayout({ children }) {
  return <Layout>{children}</Layout>;
}

Page Structure

For individual pages, use the Section, Container, and Prose components:

// In your page.tsx
import { Section, Container, Prose } from "@/components/ds";

export default function Page() {
  return (
    <Section>
      <Container>
        <Prose>
          <h1>Page Title</h1>
          <p>Your content here...</p>
        </Prose>
      </Container>
    </Section>
  );
}

Navigation

For navigation elements, use the Nav component:

import { Nav } from "@/components/ds";

export function Navigation() {
  return (
    <Nav>
      <div className="flex justify-between items-center">
        <div>Logo</div>
        <ul className="flex gap-4">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </div>
    </Nav>
  );
}