export function SelectMenu()

in src/components/HomepageFeatures/index.tsx [304:345]
42 lines of code
1 McCabe index (conditional complexity)

export function SelectMenu(): JSX.Element {
  const [menuFlag, setMenuFlag] = useState(true);
  const handleShow = (e)=>{
    setMenuFlag(!menuFlag);
  }
  return(
      <div className={styles.selectMenuBlock}>
        <div className="text--center padding-horiz--md" style={{width:'100%',height:'100%',marginTop:'50px',
          display:"flex",justifyContent:"center"}} >
          <div className={styles.menuBlock}>
            <h1 onClick={handleShow} style={{color:(menuFlag) ? "black" : "gray"}} data-value="redisCompatible">Redis Compatible</h1>
            <div className={styles.redisStyle} style={{ visibility:(menuFlag) ? "visible" : "hidden", color:(menuFlag) ? "black" : "gray"}}>
              <div className={styles.blueLine} >
                <div></div>
              </div>
              <p style={{fontSize:"22px"}}>Users can access Apache Kvrocks via any Redis client.</p>
            </div>
          </div>
          <div className={styles.menuBlock}>
            <h1 onClick={handleShow} style={{color:(!menuFlag) ? "black" : "gray"}} data-value="performanceCompare">Performance Compare</h1>
            <div className={styles.performanceStyle} style={{ visibility:(!menuFlag) ? "visible" : "hidden"}}>
              <div className={styles.blueLine} >
                <div></div>
              </div>
              <p style={{fontSize:"22px"}}>The perfect balance between performance and cost.</p>
            </div>
          </div>
        </div>
        <div className="text--center padding-horiz--md" style={{width:'100%',height:'100%',marginTop:'50px',
          display:"flex",justifyContent:"center"}} >
          <div  className={styles.chartBlock} style={{ display:(menuFlag) ? "flex" : "none"}}>
            <CodeBlock/>
            <PieChartRight/>
          </div>
          <div className={styles.chartBlock} style={{ display:(!menuFlag) ? "flex" : "none"}}>
            <HistogramChartLeft/>
            <LineChartRight/>
          </div>
        </div>
      </div>
  );
}