src/components/pages/NotFound.js

-import React, { Component } from "react";
-import { Button, Container, Header, Icon, Segment } from "semantic-ui-react";
+import { Button, Container, Header, Icon, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
 
 export default class NotFound extends Component {
   render() {
@@ -12,10 +12,10 @@ export default class NotFound extends Component {
               content="404 - A keresett oldal nem található!"
               inverted
               style={{
-                fontSize: "3em",
-                fontWeight: "normal",
+                fontSize: '3em',
+                fontWeight: 'normal',
                 marginBottom: 0,
-                marginTop: "0.5em"
+                marginTop: '0.5em',
               }}
             />
             <Button
@@ -23,9 +23,9 @@ export default class NotFound extends Component {
               primary
               size="huge"
               style={{
-                fontSize: "2em",
-                marginTop: "1em",
-                marginBottom: "1em"
+                fontSize: '2em',
+                marginTop: '1em',
+                marginBottom: '1em',
               }}
             >
               Vissza a Főoldalra

src/components/pages/Statistics.js

-import React, { Component } from "react";
-import { Container, Header, Segment } from "semantic-ui-react";
+import { Container, Menu } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+import Events from './Events';
+import LeaderBoard from './LeaderBoard';
+import Presence from './Presence';
 
 export default class Statistics extends Component {
+  // eslint-disable-next-line react/state-in-constructor
+  state = { activeItem: 'events' };
+
+  handleItemClick = (e, { name }) => this.setState({ activeItem: name });
+
   render() {
+    const { activeItem } = this.state;
     return (
       <div>
-        <Segment inverted textAlign="center" vertical>
-          <Container>
-            <Header
-              as="h1"
-              content="Statisztikák - TODO"
-              inverted
-              style={{
-                fontSize: "3em",
-                fontWeight: "normal",
-                marginBottom: 0,
-                marginTop: "0.5em"
-              }}
-            />
+        <Container
+          textAlign="center"
+          style={{ paddingBottom: '5em', paddingTop: '1em' }}
+        >
+          <Menu tabular attached="top" size="huge" compact>
+            <Menu.Item
+              name="events"
+              active={activeItem === 'events'}
+              onClick={this.handleItemClick}
+            >
+              Alkalmak
+            </Menu.Item>
+            <Menu.Item
+              name="presence"
+              active={activeItem === 'presence'}
+              onClick={this.handleItemClick}
+            >
+              Jelenlét
+            </Menu.Item>
+            <Menu.Item
+              name="leaderboard"
+              active={activeItem === 'leaderboard'}
+              onClick={this.handleItemClick}
+            >
+              Ranglista
+            </Menu.Item>
+          </Menu>
+          {activeItem === 'events' ? <Events /> : ''}
+          {activeItem === 'presence' ? <Presence /> : ''}
+          {activeItem === 'leaderboard' ? <LeaderBoard /> : ''}
         </Container>
-        </Segment>
       </div>
     );
   }