Add landing page

The landing page contains the previews for each layout.
3 years ago · 3a134e3efa
--- a/src/components/templates/Index/index.tsx
+++ 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<Props> = ({
 	query,
 	linkComponent,
 	menuLinkLabel,
 	menuLink,
 	userLink,
 	userLinkLabel,
 }) => {
 	return (
 		<Basic
 			brand="Brand"
 			query={query}
 			linkComponent={linkComponent}
 			menuLink={menuLink}
 			menuLinkLabel={menuLinkLabel}
 			userLink={userLink}
 			userLinkLabel={userLinkLabel}
 		>
 			<Container>
 				<h1>
 					Welcome
 				</h1>
 				<p>
 					Select a template to preview:
 				</p>
 				<LinkContainer>
 					<StyledLink
 						href={{
 							pathname: '/layouts/basic'
 						}}
 					>
 						Basic Layout
 						<PreviewWrapper>
 							<Preview
 								src="/layouts/basic"
 								scrolling="no"
 							/>
 						</PreviewWrapper>
 					</StyledLink>
 					<StyledLink
 						href={{
 							pathname: '/layouts/right-sidebar'
 						}}
 					>
 						Right Sidebar
 						<PreviewWrapper>
 							<Preview
 								src="/layouts/right-sidebar"
 								scrolling="no"
 							/>
 						</PreviewWrapper>
 					</StyledLink>
 					<StyledLink
 						href={{
 							pathname: '/layouts/left-sidebar'
 						}}
 					>
 						Left Sidebar
 						<PreviewWrapper>
 							<Preview
 								src="/layouts/left-sidebar"
 								scrolling="no"
 							/>
 						</PreviewWrapper>
 					</StyledLink>
 					<StyledLink
 						href={{
 							pathname: '/layouts/left-sidebar/with-menu'
 						}}
 					>
 						Left Sidebar (w/ menu)
 						<PreviewWrapper>
 							<Preview
 								src="/layouts/left-sidebar/with-menu"
 								scrolling="no"
 							/>
 						</PreviewWrapper>
 					</StyledLink>
 				</LinkContainer>
 			</Container>
 		</Basic>
 	)
 }

 export default IndexTemplate
--- 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 (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p>
          Get started by editing{' '}
          <code>pages/index.js</code>
        </p>

        <div>
          <a href="https://nextjs.org/docs">
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn">
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>
 type Props = {
 	query: string,
 }

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>
 const Page: NextPage<Props> = ({
 	query,
 }) => {
  return (
 		<Template
 			linkComponent={Link}
 			query={query}
 			menuLink={{
 				query: {
 					q: query,
 					sidebar: '',
 				}
 			}}
 			menuLinkLabel="Menu"
 			userLink={{
 				pathname: '/profile',
 				query: {
 					q: query,
 				},
 			}}
 			userLinkLabel="User"
 		/>
  )
 }

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>
 export default Page

      <footer>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" />
        </a>
      </footer>
    </div>
  )
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
 	const { q: query = '', } = ctx.query
 	return {
 		props: {
 			query,
 		}
 	}
 }