Layout scaffolding for Web apps.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

55 lines
1.5 KiB

  1. import type { V2_MetaFunction } from "@remix-run/react";
  2. import {Link} from '@remix-run/react';
  3. import { Layouts } from '@tesseract-design/viewfinder-react';
  4. // const Layouts = {
  5. // Basic: {
  6. // Root: 'div',
  7. // ContentContainer: 'div',
  8. // }
  9. // }
  10. export const meta: V2_MetaFunction = () => {
  11. return [{ title: "New Remix App" }];
  12. };
  13. const IndexPage = () => {
  14. return (
  15. <Layouts.Basic.Root>
  16. <Layouts.Basic.ContentContainer>
  17. <h1>
  18. Viewfinder Examples
  19. </h1>
  20. <nav>
  21. <h2>
  22. Layouts
  23. </h2>
  24. <div>
  25. <Link to="layouts/basic">Basic</Link>
  26. </div>
  27. <div>
  28. <Link to="layouts/basic?span=narrow">Basic Narrow</Link>
  29. </div>
  30. <div>
  31. <Link to="layouts/left-sidebar">Left Sidebar</Link>
  32. </div>
  33. <div>
  34. <Link to="layouts/left-sidebar/alternate">Left Sidebar (alternate)</Link>
  35. </div>
  36. <div>
  37. <Link to="layouts/left-sidebar-with-menu">Left Sidebar With Menu</Link>
  38. </div>
  39. <div>
  40. <Link to="layouts/right-sidebar-static">Right Sidebar Static</Link>
  41. </div>
  42. </nav>
  43. <p>
  44. 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>.
  45. </p>
  46. </Layouts.Basic.ContentContainer>
  47. </Layouts.Basic.Root>
  48. );
  49. }
  50. export default IndexPage;