mocked tab list

src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsPnpjs.module.scss

@@ -7,6 +7,42 @@
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
   }
 
+  .itemContent{
+    margin-left: 10;
+    overflow: hidden;
+  }
+
+  .itemName{
+    font-size: initial;
+    white-space: nowrap;
+    overflow: 'hidden';
+    text-overflow: 'ellipsis';
+  }
+
+  .itemCell{
+    margin: 2px;
+    min-height: 54;
+    padding: 10;
+    box-sizing: 'border-box';
+    //border: 1px solid;
+    display: 'flex';
+    background : $ms-color-themeDarkAlt;
+  }
+
+  .itemCell:hover{
+    background : $ms-color-themeDarker;
+  }
+  .itemIndex {
+    font-size : initial;
+    //color : $ms-color-neutralTertiary;
+    margin-bottom : 10;
+  }
+
+  .tablink{
+    color : $ms-color-neutralTertiary;
+    margin-bottom : 10;
+  }
+
   .row {
     @include ms-Grid-row;
     @include ms-fontColor-white;
@@ -37,38 +73,5 @@
     @include ms-fontColor-white;
   }
 
-  .button {
-    // Our button
-    text-decoration: none;
-    height: 32px;
 
-    // Primary Button
-    min-width: 80px;
-    background-color: $ms-color-themePrimary;
-    border-color: $ms-color-themePrimary;
-    color: $ms-color-white;
-
-    // Basic Button
-    outline: transparent;
-    position: relative;
-    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-    -webkit-font-smoothing: antialiased;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-    border-width: 0;
-    text-align: center;
-    cursor: pointer;
-    display: inline-block;
-    padding: 0 16px;
-
-    .label {
-      font-weight: $ms-font-weight-semibold;
-      font-size: $ms-font-size-m;
-      height: 32px;
-      line-height: 32px;
-      margin: 0 4px;
-      vertical-align: top;
-      display: inline-block;
-    }
-  }
 }

src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsPnpjs.tsx

@@ -2,24 +2,93 @@ import * as React from 'react';
 import styles from './ReactTeamsTabsPnpjs.module.scss';
 import { IReactTeamsTabsPnpjsProps } from './IReactTeamsTabsPnpjsProps';
 import { escape } from '@microsoft/sp-lodash-subset';
+import { Label } from 'office-ui-fabric-react/lib/Label';
+import { Pivot, PivotItem, IPivotProps, PivotLinkSize, PivotLinkFormat } from 'office-ui-fabric-react/lib/Pivot';
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
+import { List } from 'office-ui-fabric-react/lib/List';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { ITheme, mergeStyleSets, getTheme, getFocusStyle } from 'office-ui-fabric-react/lib/Styling';
 
-export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabsPnpjsProps, {}> {
-  public render(): React.ReactElement<IReactTeamsTabsPnpjsProps> {
+
+export interface IReactTeamsTabsPnpjsState {
+  pivotArray: any[];
+}
+export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabsPnpjsProps, IReactTeamsTabsPnpjsState> {
+
+  constructor(props: IReactTeamsTabsPnpjsProps) {
+    super(props);
+    this.state = {
+      pivotArray: []
+    };
+
+
+    // sp.web.lists.getByTitle("Site Pages").items.filter("Is_x0020_Model eq 1").select("Title,FileRef").getAll().then((items: any[]) => {
+    //   var tmpItems: any[] = new Array();
+    //
+    //   //DropDown initialization
+    //   items.forEach(element => {
+    //     var item = { key: element["FileRef"], text: element["Title"] };
+    //     tmpItems.push(item);
+    //   });
+    //
+    //   this.setState({ allItems: tmpItems });
+    // });
+
+    this._onRenderTabItem = this._onRenderTabItem.bind(this);
+
+  }
+
+  public render() {
     return (
       <div className={styles.reactTeamsTabsPnpjs}>
         <div className={styles.container}>
           <div className={styles.row}>
             <div className={styles.column}>
-              <span className={ styles.title }>Welcome to SharePoint!</span>
-              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
-              <p className={ styles.description }>{escape(this.props.description)}</p>
-              <a href="https://aka.ms/spfx" className={ styles.button }>
-                <span className={ styles.label }>Learn more</span>
-              </a>
+              <div>
+                <Pivot linkSize={PivotLinkSize.large} linkFormat={PivotLinkFormat.tabs}>{this.state.pivotArray}</Pivot>
+              </div>
             </div>
           </div>
         </div>
       </div>
     );
   }
+  public componentDidMount() {
+    var activeTasks: any[] = [];
+    var tmPpivotArray: any[] = [];
+
+
+    activeTasks.push({ name: 'a name', description: 'a desc' });
+    activeTasks.push({ name: 'b name', description: 'b desc' });
+    activeTasks.push({ name: 'c name', description: 'c desc' });
+
+    tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test1"));
+    tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test2"));
+    tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test3"));
+
+
+    this.setState({ pivotArray: tmPpivotArray });
+  }
+
+  private _renderPivotItemList(channels: any[], tabName: string){
+    return (
+      <PivotItem headerText={`${tabName} (${channels.length})`}>
+        <FocusZone direction={FocusZoneDirection.vertical} >
+          <List items={channels} onRenderCell={this._onRenderTabItem} />
+        </FocusZone>
+      </PivotItem>
+    );
+  }
+
+  private _onRenderTabItem(item: any, index: number | undefined) {
+    return (
+      <div className={styles.itemCell} data-is-focusable={true}>
+        <div className={styles.itemContent}>
+          <div className={styles.itemName}>{item.name}</div>
+          <Link className={styles.tablink} href="http://dev.office.com/fabric/components/link" target="_blank">it renders as an anchor tag.</Link>
+          <div className={styles.subTitle}>{item.description}</div>
+        </div>
+      </div>
+    );
+  }
 }