How to Implement Rudder-style Bottom Navigation?

@Entry
@Component
struct Index {
  @State tabArray: Array<number> = [0, 1, 2]
  @State focusIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder
  TabBuilder(tabName: string, tabIndex: number) {
    Column({ space: 10 }) {
      Stack() {
        Row() {
          Image($r('app.media.startIcon'))
            .width(40).height(40)
          Text(tabName).fontSize(14)
            .margin({ top: 60, left: -40 })
        }
        .width(80)
        .height(80)
        .backgroundColor($r('sys.color.white'))
        .justifyContent(FlexAlign.Center)
        .border({
          radius: {
            topLeft: 130,
            topRight: 130,
            bottomLeft: 40,
            bottomRight: 80
          },
        })
      }
      .margin({ bottom: tabIndex === 1 ? 60 : 0 })
    }
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.controller.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
    .backgroundColor(Color.White)
    .width('33.34%')
    .height(100)
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.BottomStart }) {
        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
          ForEach(this.tabArray, (item: number, index: number) => {
            TabContent() {
              Text('The page ' + item + ' content')
                .height('30%')
                .width('100%')
                .fontSize(30)
                .padding({ bottom: 150 })
            }
            .backgroundColor('#5291FF')
          })
        }
        .barHeight(0)
        .animationDuration(100)
        .onChange((index: number) => {
          console.info('foo change')
          this.focusIndex = index
        })

        // Tab
        Row() {
          Scroll() {
            Row() {
              ForEach(this.tabArray, (item: number, index: number) => {
                this.TabBuilder('Tab ' + item, index)
              })
            }
            .margin({ top: 20 })
            .justifyContent(FlexAlign.SpaceBetween)
            .alignItems(VerticalAlign.Bottom)
          }
          .scrollable(ScrollDirection.Horizontal)
          .scrollBar(BarState.Off)
          .width('100%')
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(VerticalAlign.Bottom)
        .width('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}