|
- import * as React from 'react'
- import styled from 'styled-components'
- import * as T from '@tesseract-design/react-common'
-
- const Base = styled('div')({
- '--width-base': '360px',
- '--height-topbar': '4rem',
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100%',
- height: 'var(--height-topbar, 4rem)',
- backgroundColor: 'var(--color-bg, white)',
- zIndex: 1,
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '~ *': {
- paddingTop: 'var(--height-topbar, 4rem)',
- },
- })
-
- const Container = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
- margin: '0 auto',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- width: '100%',
- height: '100%',
- display: 'flex',
- alignItems: 'center',
- })
-
- const BrandContainer = styled('div')({
- width: '6rem',
- '@media (min-width: 720px)': {
- width: '8rem',
- },
- })
-
- const SearchContainer = styled('form')({
- flex: 'auto',
- padding: '0 1rem',
- boxSizing: 'border-box',
- })
-
- const UserContainer = styled('div')({
- textAlign: 'right',
- '@media (min-width: 720px)': {
- minWidth: '8rem',
- },
- })
-
- type Props = {
- query?: string,
- onSearch?: React.FormEventHandler,
- searchLabel?: string,
- searchName?: string,
- searchHint?: string,
- }
-
- const TopBar: React.FC<Props> = ({
- query,
- onSearch,
- searchLabel = 'Search',
- searchName = 'q',
- searchHint = 'e.g. keywords, names…',
- }) => {
- return (
- <Base>
- <Container>
- <BrandContainer>
- Brand
- </BrandContainer>
- <SearchContainer
- onSubmit={onSearch}
- >
- <T.TextInput
- name={searchName}
- label={searchLabel}
- hint={searchHint}
- defaultValue={query}
- border
- alternate
- />
- </SearchContainer>
- <UserContainer>
- User
- </UserContainer>
- </Container>
- </Base>
- )
- }
-
- export default TopBar
|