- import * as React from 'react'
- import * as T from '@tesseract-design/react-common'
- import { Basic } from '@tesseract-design/viewfinder'
- import Link from '../../molecules/Link'
- import DummyContent from '../../molecules/DummyContent'
- import Brand from '../../molecules/Brand'
-
- type Props = {
- query: string,
- userLinkLabel: string,
- searchQueryKey: string,
- searchLabel: string,
- searchHint: string,
- popupQueryKey: string,
- userPopupQueryValue: string,
- }
-
- const BasicLayoutTemplate: 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>
- <DummyContent />
- </Basic.ContentContainer>
- </Basic.Layout>
- )
- }
-
- export default BasicLayoutTemplate
|