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

import * as React from 'react'
import styled from 'styled-components'
import * as T from '@tesseract-design/react-common'
import { Basic } from '@tesseract-design/viewfinder'
import Link from '../../molecules/Link'
import Brand from '../../molecules/Brand'

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,
	userLinkLabel: string,
	searchQueryKey: string,
	searchLabel: string,
	searchHint: string,
	popupQueryKey: string,
	userPopupQueryValue: string,
}

const IndexTemplate: React.FC<Props> = ({
	query,
	userLinkLabel,
	searchQueryKey,
	searchLabel,
	searchHint,
	popupQueryKey,
	userPopupQueryValue,
}) => {
	return (
		<Basic.Layout
			brand={
				<Brand />
			}
			topBarCenter={
				<form>
					<T.TextInput
						name={searchQueryKey}
						label={searchLabel}
						hint={searchHint}
						defaultValue={query}
						border
						alternate
					/>
				</form>
			}
			userLink={
				<Link
					href={{
						query: {
							[popupQueryKey]: userPopupQueryValue,
						},
					}}
				>
					<T.Icon
						name="user"
						label={userLinkLabel}
					/>
				</Link>
			}
		>
			<Basic.ContentContainer>
				<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-static'
						}}
					>
						Right Sidebar (static)
						<PreviewWrapper>
							<Preview
								src="/layouts/right-sidebar-static"
								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 (with menu)
						<PreviewWrapper>
							<Preview
								src="/layouts/left-sidebar/with-menu"
								scrolling="no"
							/>
						</PreviewWrapper>
					</StyledLink>
				</LinkContainer>
			</Basic.ContentContainer>
		</Basic.Layout>
	)
}

export default IndexTemplate