news section

lang/en.json

@@ -20,5 +20,9 @@
   "components": {
     "select_file": "Select file or folder...",
     "download": "Download"
+  },
+  "news": {
+    "latest_commits": "Commits",
+    "latest_version": "Latest Version"
   }
 }

src/ui/App.tsx

@@ -12,6 +12,7 @@ import Options from './components/menu/Options'
 import MiniDialog from './components/MiniDialog'
 import DownloadList from './components/common/DownloadList'
 import Downloads from './components/menu/Downloads'
+import NewsSection from './components/news/NewsSection'
 
 interface IProps {
   [key: string]: never;
@@ -51,6 +52,8 @@ class App extends React.Component<IProps, IState> {
           downFunc={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })}
         />
 
+        <NewsSection />
+
         {
           // Mini downloads section
           this.state.miniDownloadsOpen ? 

src/ui/components/news/NewsSection.css

@@ -0,0 +1,45 @@
+.NewsSection {
+  background-color: rgba(106, 105, 106, 0.6);
+
+  display: flex;
+  
+  position: absolute;
+
+  height: 30%;
+  width: 40%;
+
+  top: 35%;
+  left: 5%;
+}
+
+.NewsTabs {
+  background-color: rgba(77, 77, 77, 0.6);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  font-weight: bold;
+  color: #fff;
+
+  width: 100%;
+  height: 20%;
+}
+
+.NewsTab {
+  height: 50%;
+
+  margin: 0 10px;
+
+  text-align: center;
+  border-bottom: 1px solid transparent;
+}
+
+.NewsTab:hover {
+  cursor: pointer;
+}
+
+.NewsTab.selected {
+  border-bottom: 1px solid #ffc61e;
+}

src/ui/components/news/NewsSection.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import Tr from '../../../utils/language'
+
+import './NewsSection.css'
+
+interface IProps {
+  selected?: string;
+}
+
+interface IState {
+  selected: string;
+}
+
+export default class NewsSection extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      selected: props.selected || 'commits'
+    }
+
+    this.setSelected = this.setSelected.bind(this)
+  }
+
+  setSelected(item: string) {
+    this.setState({ selected: item })
+  }
+
+  render() {
+    return (
+      <div className="NewsSection">
+        <div className="NewsTabs">
+          <div className={'NewsTab ' + (this.state.selected === 'commits' ? 'selected' : '')} id="commits" onClick={() => this.setSelected('commits')}>
+            <Tr text="news.latest_commits" />
+          </div>
+        </div>
+        <div className="NewsTabs">
+          <div className={'NewsTab ' + (this.state.selected === 'latest_version' ? 'selected' : '')} id="latest_version" onClick={() => this.setSelected('latest_version')}>
+            <Tr text="news.latest_version" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}