simple ChannelView

src/App.tsx

@@ -1,16 +1,21 @@
 import React, { Component } from 'react';
 
-import Channels from './components/channels/Channels';
 import Header from './components/Header/Header';
 
 import './App.css';
 
 class App extends Component {
   public render() {
+    const channel: Channel = {
+      id: 1,
+      name: 'test',
+      totalClients: -1,
+      neededSubscribePower: 0,
+      subchannels: [],
+    };
     return (
       <div className='App'>
         <Header />
-        <Channels />
       </div>
     );
   }

src/components/channels/ChannelView.css

@@ -0,0 +1,10 @@
+.channel-view {
+  background-color: green;
+  width: 20%;
+  height: auto;
+  margin: auto;
+}
+
+.channel-view ul {
+  text-align: left
+}

src/components/channels/ChannelView.tsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import './ChannelView.css';
+
+export default class ChannelView extends Component<ChannelViewProps> {
+  render() {
+    const { channel } = this.props;
+    return (
+      <div className='channel-view'>
+        <h2>{channel.name}</h2>
+        <ul>
+          <li>
+            <span>#{channel.id} </span>
+            {channel.name}
+          </li>
+          {channel.totalClients >= 0 && (
+            <li>
+              <span>Users online</span> {channel.totalClients}
+            </li>
+          )}
+          {channel.subchannels.length > 0 && (
+            <li>
+              <span>Subchannels:</span>
+            </li>
+          )}
+        </ul>
+      </div>
+    );
+  }
+}