probe setup

src/ts/@overflow/probe/react/components/ProbeDown.tsx

@@ -4,8 +4,8 @@ import {
   Menu,
   Segment,
   MenuItemProps,
-  Header,
   Container,
+  Icon,
 } from 'semantic-ui-react';
 
 export interface StateProps {
@@ -19,45 +19,81 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  activeItem: string[];
+  activeItem: string;
 }
 
-const osNames = ['Windows', 'Debian', 'Ubuntu', 'Fedora', 'CentOS'];
+const osNames = [
+  {
+    'name': 'Windows',
+    'icon': 'windows',
+  },
+  {
+    'name': 'Ubuntu',
+    'icon': 'linux',
+  },
+  {
+    'name': 'Fedora',
+    'icon': 'linux',
+  },
+  {
+    'name': 'CentOS',
+    'icon': 'linux',
+  },
+];
 
 export class ProbeDown extends React.Component<any, any> {
   constructor(props: Props, context: State) {
     super(props, context);
 
-    this.state = { activeItem: osNames[0] };
+    this.state = { activeItem: osNames[0].name };
   }
 
   public handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuItemProps): void => {
     this.setState({ activeItem: data.name });
+  }
 
-    console.log(data.name);
+  public ShowContent = (): JSX.Element => {
+    let os = this.state.activeItem;
+    switch (os) {
+      case 'Windows': {
+        return <Windows />;
+      }
+      case 'Ubuntu': {
+        return <Ubuntu />;
+      }
+      case 'Fedora': {
+        return <Fedora />;
+      }
+      case 'CentOS': {
+        return <CentOS />;
+      }
+      default:
+        break;
+    }
+    return null;
   }
 
   public render(): JSX.Element {
-
     const { activeItem } = this.state.activeItem;
     return (
       <Container fluid>
-        <Header as='h3' dividing>Probe Download</Header>
         <Grid>
           <Grid.Column width={4}>
-            <Menu fluid vertical tabular>
-              {osNames.map((os: string) => {
+            <Menu fluid vertical icon='labeled'>
+              {osNames.map((item: any, index: number) => {
                 return (
-                  <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
+                  <Menu.Item key={index} name={item.name} active={activeItem === item.name} onClick={this.handleItemClick} >
+                    <Icon name={item.icon} />
+                    {item.name}
+                  </Menu.Item>
                 );
               })}
             </Menu>
           </Grid.Column>
 
-
           <Grid.Column stretched width={12}>
-            <Segment vertical>
-              {this.state.activeItem} Download Page
+            <Segment>
+              {this.ShowContent()}
             </Segment>
           </Grid.Column>
         </Grid>
@@ -66,3 +102,58 @@ export class ProbeDown extends React.Component<any, any> {
   }
 }
 
+export class Windows extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        Windows Download Page
+      </div>
+    );
+  }
+}
+
+export class Ubuntu extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        Ubuntu Download Page
+      </Container>
+    );
+  }
+}
+
+export class Fedora extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        Fedora Download Page
+      </Container>
+    );
+  }
+}
+
+export class CentOS extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        CentOS Download Page
+      </Container>
+    );
+  }
+}