github.com/pingcap/tiflow@v0.0.0-20240520035814-5bf52d54e205/dm/ui/src/pages/_layout.tsx (about)

     1  import React, { Suspense, useCallback, useState } from 'react'
     2  import { Outlet } from 'react-router-dom'
     3  
     4  import { Layout, Spin } from '~/uikit'
     5  import { LoadingOutlined } from '~/uikit/icons'
     6  import SiderMenu from '~/layouts/SiderMenu'
     7  import HeaderNav from '~/layouts/Header'
     8  
     9  const { Header, Sider, Content } = Layout
    10  
    11  const CenteredLoading = () => {
    12    return (
    13      <div className="h-full w-full flex justify-center items-center">
    14        <Spin size="large" indicator={<LoadingOutlined spin />} />
    15      </div>
    16    )
    17  }
    18  
    19  const GlobalLayout: React.FC = () => {
    20    const [collapsed, setCollapsed] = useState(false)
    21    const handleCollapseChange = useCallback((status: boolean) => {
    22      setCollapsed(status)
    23    }, [])
    24  
    25    return (
    26      <Layout className="flex-1">
    27        <Sider
    28          theme="light"
    29          width={300}
    30          collapsible
    31          collapsed={collapsed}
    32          onCollapse={handleCollapseChange}
    33        >
    34          <SiderMenu collapsed={collapsed} />
    35        </Sider>
    36        <Layout>
    37          <Header className="!bg-white">
    38            <HeaderNav />
    39          </Header>
    40  
    41          <Content>
    42            <Suspense fallback={<CenteredLoading />}>
    43              <Outlet />
    44            </Suspense>
    45          </Content>
    46        </Layout>
    47      </Layout>
    48    )
    49  }
    50  
    51  export default GlobalLayout