console.log( "==== simpread options page load ====" )

import '../assets/css/options.css';

import Tabs       from 'tabs';
import * as waves from 'waves';

const tabsitem = [{
        name: "共通",
        value: "common",
        icon : "",
        active : true,
    },{
        name: "聚焦模式",
        value: "focus",
        icon : "",
    },{
        name: "阅读模式",
        value: "read",
        icon : "",
    },{
        name: "稍后读",
        value: "later",
        icon : "",
}];

/**
 * Add parallax scroll
 */
$( window ).scroll( (event) => {
    const $target = $( event.target ),
          offset  = ( 0 - $target.scrollTop() ) / 2;
    $( ".top" ).css( "transform", `translate3d(0px, ${offset}px, 0px)` )
});

/**
 * Waves render
 */
waves.Render({ root: "main", name: "sr-tabs" });

/**
 * Tabs onChange event handler
 * 
 * @param {jquery} prev jquery object
 * @param {event} current event 
 */
function tabsOnChange( $prev, event ) {
    console.log( $prev, event )
}

/**
 * Tabs render
 */
const tabs =
    <Tabs waves="sr-tabs waves-effect waves-light"
        items={ tabsitem } bgColor="rgb(153,204,255)" onChange={ ( $p, evt )=>tabsOnChange( $p, evt ) }>
        <div>aaa</div>
        <div>bbb</div>
        <div>ccc</div>
        <div>ddd</div>
    </Tabs>;
ReactDOM.render( tabs, $( ".tabscontainer" )[0] );
@@ -224,36 +224,16 @@
 mmon%22,%0D%0A
-        icon : %22%22,%0D%0A
         
@@ -248,16 +248,16 @@
  true,%0D%0A
+
     %7D,%7B%0D
@@ -305,36 +305,16 @@
 ocus%22,%0D%0A
-        icon : %22%22,%0D%0A
     %7D,%7B%0D
@@ -361,36 +361,16 @@
 read%22,%0D%0A
-        icon : %22%22,%0D%0A
     %7D,%7B%0D
@@ -388,24 +388,24 @@
 me: %22%E7%A8%8D%E5%90%8E%E8%AF%BB%22,%0D%0A
+
         valu
@@ -421,28 +421,8 @@
 %22,%0D%0A
-        icon : %22%22,%0D%0A
 %7D%5D;%0D

Optimize tabs item.