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';

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

const IndexPage = () => {
  return (
    <Layouts.Basic.Root>
      <Layouts.Basic.ContentContainer>
				<div className="prose my-16">
					<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>
				</div>
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  );
}

export default IndexPage;