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 '@theoryofnekomata/viewfinder'
import Link from '../../molecules/Link'
import Brand from '../../molecules/Brand'

const TopBarComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
	'::before': {
		content: "''",
		width: '100%',
		height: '100%',
		position: 'absolute',
		top: 0,
		left: 0,
		pointerEvents: 'none',
	},
	'::after': {
		backgroundColor: 'black',
		opacity: 0.5,
		content: "''",
		width: '100%',
		height: '100%',
		position: 'absolute',
		top: 0,
		left: 0,
		pointerEvents: 'none',
	},
})

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 />}
			topBarComponent={TopBarComponent}
			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