Improve mod browser load time

Add pages to mod browser
Still WIP

src/ui/components/mods/ModPages.tsx

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