starter/src/components/templates/Index/index.tsx

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