diff --git a/src/components/templates/Index/index.tsx b/src/components/templates/Index/index.tsx new file mode 100644 index 0000000..f1dbfd5 --- /dev/null +++ b/src/components/templates/Index/index.tsx @@ -0,0 +1,156 @@ +import * as React from 'react' +import styled from 'styled-components' +import Basic, { Container } from '../../organisms/layouts/Basic' +import Link from '../../molecules/Link'; +import {UrlObject} from 'url'; + +const LinkContainer = styled('nav')({ + margin: '1rem 0', + display: 'grid', + gap: '1rem', + '@media (min-width: 720px)': { + gridTemplateColumns: 'repeat(2, 1fr)', + }, +}) + +const PreviewWrapper = styled('div')({ + overflow: 'hidden', + width: '100%', + paddingBottom: '150%', + position: 'relative', + marginTop: '0.25rem', + '::after': { + content: "''", + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + border: '0.125rem solid', + boxSizing: 'border-box', + }, + '@media (min-width: 720px)': { + paddingBottom: '75%', + }, +}) + +const Preview = styled('iframe')({ + position: 'absolute', + top: 0, + left: 0, + border: 0, + display: 'block', + transformOrigin: 'top left', + width: '200%', + height: '200%', + transform: 'scale(0.5)', + '@media (min-width: 720px)': { + width: '400%', + height: '400%', + transform: 'scale(0.25)', + }, +}) + +const StyledLink = styled(Link)({ + display: 'block', + textDecoration: 'none', + // borderRadius: '0.25rem', + // padding: '1rem', + boxSizing: 'border-box', + // border: '0.125rem solid', +}) + +type Props = { + query: string, + linkComponent: React.ElementType, + menuLink: UrlObject, + userLink: UrlObject, + menuLinkLabel: string, + userLinkLabel: string, +} + +const IndexTemplate: React.FC = ({ + query, + linkComponent, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, +}) => { + return ( + + +

+ Welcome +

+

+ Select a template to preview: +

+ + + Basic Layout + + + + + + Right Sidebar + + + + + + Left Sidebar + + + + + + Left Sidebar (w/ menu) + + + + + + + + ) +} + +export default IndexTemplate diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5ec5afc..ac90e09 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,62 +1,44 @@ import Head from 'next/head' +import Link from '../components/molecules/Link'; +import Template from '../components/templates/Index'; +import {GetServerSideProps, NextPage} from 'next'; -export default function Home() { - return ( -
- - Create Next App - - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.js -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- +type Props = { + query: string, +} - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- +const Page: NextPage = ({ + query, +}) => { + return ( +