//@flow

/*******************************************************************************
 * Imports
 *******************************************************************************/

import React from 'react'

import GithubButton from 'tldr/components/GithubButton'
import Tldr         from 'tldr/components/Tldr'
import Version      from 'tldr/components/Version'

/*******************************************************************************
 * Type Definitions
 *******************************************************************************/

type NavigateProps = {
  navigate(to: string): any;
}

/*******************************************************************************
 * Public API
 *******************************************************************************/

export default ({navigate}: NavigateProps) => (
  <nav>
    <section className="content">
      <section className="brand-and-version">
        <Tldr />
        <Version />
      </section>
      <section className="search">
        <input
          tabIndex="100"
          type="text"
          onChange={ ({target: {value}}) => navigate(value) }
          placeholder="Command name"
        />
      </section>
      <section className="github-stars">
        <GithubButton
          type="star"
          repository="tldr.jsx"
          user="ostera"
          count={true}
          size="large"
        />
      </section>
    </section>
  </nav>
)


@@ -360,16 +360,58 @@
 rsion'%0A%0A
+import type %7B Package %7D from 'tldr/Tldr'%0A%0A
 /*******
@@ -638,16 +638,36 @@
 ): any;%0A
+  version: Package;%0A
 %7D%0A%0A/****
@@ -864,16 +864,25 @@
 navigate
+, version
 %7D: Navig
@@ -1017,16 +1017,29 @@
 %3CVersion
+ %7B...version%7D
  /%3E%0A    
@@ -1518,7 +1518,6 @@
 av%3E%0A
+
 )%0A
-%0A

Use new stateless version package in Nav component