mod list colors and such

src/resources/icons/wrench.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 87.12 73.212 L 48.774 34.866 c 3.723 -9.153 1.873 -20.042 -5.553 -27.468 c -7.008 -7.008 -17.094 -9.025 -25.9 -6.104 L 28.96 12.934 c 4.387 4.387 4.833 11.594 0.579 16.112 c -4.402 4.674 -11.761 4.757 -16.268 0.25 L 1.295 17.32 c -2.922 8.807 -0.904 18.892 6.104 25.9 c 7.426 7.426 18.315 9.276 27.468 5.553 L 73.212 87.12 c 3.84 3.84 10.067 3.84 13.908 0 l 0 0 C 90.96 83.279 90.96 77.052 87.12 73.212 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

src/ui/Mods.css

@@ -0,0 +1,5 @@
+.Mods {
+  backdrop-filter: blur(10px);
+  height: 100%;
+  width: 100%;
+}

src/ui/Mods.tsx

@@ -1,29 +1,60 @@
 import React from 'react'
 import DownloadHandler from '../utils/download'
+import { ModHeader } from './components/mods/ModHeader'
+import { ModList } from './components/mods/ModList'
 import TopBar from './components/TopBar'
 
+import './Mods.css'
+
 interface IProps {
   downloadHandler: DownloadHandler
 }
 
 interface IState {
   isDownloading: boolean
+  category: string
 }
 
+const headers = [
+  {
+    name: 'hot',
+    title: 'Hot',
+  },
+  {
+    name: 'new',
+    title: 'New',
+  },
+]
+
 export class Mods extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
+
+    this.state = {
+      isDownloading: false,
+      category: '',
+    }
   }
 
   async componentDidMount() {
     return
   }
 
+  async setCategory(value: string) {
+    this.setState({
+      category: value,
+    })
+  }
+
   render() {
     return (
-      <>
+      <div className="Mods">
         <TopBar />
-      </>
+
+        <ModHeader onChange={this.setCategory} headers={headers} defaultHeader={'hot'} />
+
+        <ModList sort={this.state.category} />
+      </div>
     )
   }
 }

src/ui/components/mods/ModHeader.css

@@ -0,0 +1,25 @@
+.ModHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+
+  padding: 10px;
+
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+  background: rgba(77, 77, 77, 0.6);
+}
+
+.ModHeaderTitle {
+}
+
+.ModHeaderTitle:hover {
+  cursor: pointer;
+}
+
+.ModHeaderTitle.selected {
+  border-bottom: 2px solid #fff;
+}

src/ui/components/mods/ModHeader.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import './ModHeader.css'
+
+interface IProps {
+  headers: {
+    title: string
+    name: string
+  }[]
+  onChange: (value: string) => void
+  defaultHeader: string
+}
+
+interface IState {
+  selected: string
+}
+
+export class ModHeader extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      selected: this.props.defaultHeader,
+    }
+  }
+
+  setSelected(value: string) {
+    this.setState({
+      selected: value,
+    })
+
+    this.props.onChange(value)
+  }
+
+  render() {
+    return (
+      <div className="ModHeader">
+        {this.props.headers.map((header, index) => {
+          return (
+            <div
+              key={index}
+              className={`ModHeaderTitle ${this.state.selected === header.name ? 'selected' : ''}`}
+              onClick={() => this.setSelected(header.name)}
+            >
+              {header.title}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}

src/ui/components/mods/ModList.css

@@ -0,0 +1,6 @@
+.ModList {
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(106, 105, 106, 0.6);
+}

src/ui/components/mods/ModList.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import './ModList.css'
+
+interface IProps {
+  sort: string
+}
+
+interface IState {
+  modList: string[]
+}
+
+export class ModList extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    return <div className="ModList"></div>
+  }
+}

src/ui/components/mods/ModTile.tsx

@@ -0,0 +1 @@
+export {}