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;