feat(ott-221): init filters components (#30)

src/features/App/AuthenticatedApp.tsx

@@ -16,12 +16,14 @@ import { PlayerPage } from 'features/PlayerPage'
 import { TournamentPage } from 'features/TournamentPage'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { UserAccount } from 'features/UserAccount'
+import { ToggleScore } from 'features/ToggleScore'
 
 export const AuthenticatedApp = () => {
   useLexicsConfig(authenticatedLexics)
 
   return (
     <Fragment>
+      <ToggleScore />
       <LanguageSelect />
       <Switch>
         <Route exact path={PAGES.home}>

src/features/DateFilter/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+import { Wrapper } from './styled'
+
+export const DateFilter = () => <Wrapper />

src/features/DateFilter/styled.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div``

src/features/Header/index.tsx

@@ -1,11 +1,16 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 import { Menu } from 'features/Menu'
 
 import { Wrapper } from './styled'
 
-export const Header = () => (
+type HeaderProps = {
+  children: ReactNode,
+}
+
+export const Header = ({ children }: HeaderProps) => (
   <Wrapper>
     <Menu />
+    {children}
   </Wrapper>
 )

src/features/HomePage/index.tsx

@@ -2,9 +2,35 @@ import React from 'react'
 
 import { Header } from 'features/Header'
 import { MainWrapper } from 'features/MainWrapper'
+import { Search } from 'features/Search'
+import { DateFilter } from 'features/DateFilter'
+import { MatchStatusFilter } from 'features/MatchStatusFilter'
+import { SportTypeFilter } from 'features/SportTypeFilter'
+import { TournamentFilter } from 'features/TournamentFilter'
+
+import {
+  FilterWrapper,
+} from './styled'
 
 export const HomePage = () => (
   <MainWrapper>
-    <Header />
+    <Header>
+      <FilterWrapper>
+        <Search />
+      </FilterWrapper>
+
+      <FilterWrapper>
+        <DateFilter />
+      </FilterWrapper>
+
+      <FilterWrapper>
+        <MatchStatusFilter />
+      </FilterWrapper>
+
+      <FilterWrapper>
+        <SportTypeFilter />
+        <TournamentFilter />
+      </FilterWrapper>
+    </Header>
   </MainWrapper>
 )

src/features/HomePage/styled.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components/macro'
+
+export const FilterWrapper = styled.div`
+  width: 288px;
+  height: 48px;
+  margin-right: 16px;
+`

src/features/MatchStatusFilter/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+import { Wrapper } from './styled'
+
+export const MatchStatusFilter = () => <Wrapper />

src/features/MatchStatusFilter/styled.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div``

src/features/Search/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+import { Wrapper } from './styled'
+
+export const Search = () => <Wrapper />

src/features/Search/styled.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div``

src/features/SportTypeFilter/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+import { Wrapper } from './styled'
+
+export const SportTypeFilter = () => <Wrapper />

src/features/SportTypeFilter/styled.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div``

src/features/ToggleScore/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+import { Wrapper } from './styled'
+
+export const ToggleScore = () => <Wrapper />

src/features/ToggleScore/styled.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div``

src/features/TournamentFilter/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+import { Wrapper } from './styled'
+
+export const TournamentFilter = () => <Wrapper />

src/features/TournamentFilter/styled.tsx

@@ -0,0 +1,3 @@
+import styled from 'styled-components/macro'
+
+export const Wrapper = styled.div``