viewfinder/packages/kitchen-sink/react-remix/app/routes/_index.tsx

import type { V2_MetaFunction } from "@remix-run/react";
import {Link} from '@remix-run/react';
import { Layouts } from '@tesseract-design/viewfinder-react';

// const Layouts = {
//   Basic: {
//     Root: 'div',
//     ContentContainer: 'div',
//   }
// }

export const meta: V2_MetaFunction = () => {
  return [{ title: "New Remix App" }];
};

const IndexPage = () => {
  return (
    <Layouts.Basic.Root>
      <Layouts.Basic.ContentContainer>
        <h1>
          Viewfinder Examples
        </h1>
        <nav>
          <h2>
            Layouts
          </h2>
          <div>
            <Link to="layouts/basic">Basic</Link>
          </div>
          <div>
            <Link to="layouts/basic?span=narrow">Basic Narrow</Link>
          </div>
          <div>
            <Link to="layouts/left-sidebar">Left Sidebar</Link>
          </div>
          <div>
            <Link to="layouts/left-sidebar/alternate">Left Sidebar (alternate)</Link>
          </div>
          <div>
            <Link to="layouts/left-sidebar-with-menu">Left Sidebar With Menu</Link>
          </div>
          <div>
            <Link to="layouts/right-sidebar-static">Right Sidebar Static</Link>
          </div>
        </nav>
        <p>
          Look at how the layouts are coded in the <a href="https://code.modal.sh/TheoryOfNekomata/viewfinder" rel="noreferrer noopener" target="_blank">Git repository</a>.
        </p>
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  );
}

export default IndexPage;