From 053c43a079b10090768a35f78a3b4d8fe853e62c Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Sat, 14 May 2022 01:28:56 -0700
Subject: [PATCH] news section

---
 lang/en.json                           |  4 +++
 src/ui/App.tsx                         |  3 ++
 src/ui/components/news/NewsSection.css | 45 ++++++++++++++++++++++++++
 src/ui/components/news/NewsSection.tsx | 45 ++++++++++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 src/ui/components/news/NewsSection.css
 create mode 100644 src/ui/components/news/NewsSection.tsx

diff --git a/lang/en.json b/lang/en.json
index c962262..b4268c9 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -20,5 +20,9 @@
   "components": {
     "select_file": "Select file or folder...",
     "download": "Download"
+  },
+  "news": {
+    "latest_commits": "Commits",
+    "latest_version": "Latest Version"
   }
 }
\ No newline at end of file
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index abbfc11..6772234 100644
--- a/src/ui/App.tsx
+++ b/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 ? 
diff --git a/src/ui/components/news/NewsSection.css b/src/ui/components/news/NewsSection.css
new file mode 100644
index 0000000..5fe54e4
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/ui/components/news/NewsSection.tsx b/src/ui/components/news/NewsSection.tsx
new file mode 100644
index 0000000..a4c3c45
--- /dev/null
+++ b/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>
+    )
+  }
+}
\ No newline at end of file