pali-lili/frontend/src/App.tsx

import React, {useState} from 'react';
import {CloudServerOutlined, UnorderedListOutlined} from '@ant-design/icons';
import {Breadcrumb, Layout, Menu, type MenuProps, theme, Typography} from 'antd';

import "./App.css";
import ApiKeyButton from "./ApiKeyButton.tsx";
import TofuInstanceList from "./TofuInstanceList.tsx";
import {Navigate, Route, Routes, useNavigate} from "react-router";
import TofuInstanceDetail from "./TofuInstanceDetail.tsx";

const {Header, Content, Footer, Sider} = Layout;
const {Title, Paragraph} = Typography;

const App: React.FC = () => {
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();

    const [apiKey, setApiKey] = useState<string | undefined>(undefined);
    const [breadcrumb, setBreadcrumb] = useState();
    const navigate = useNavigate();

    const sideMenu: MenuProps['items'] = [{
        key: 'tofu',
        label: 'OpenTofu',
        icon: React.createElement(CloudServerOutlined),
        children: [
            {
                key: 'instances',
                label: 'Instances',
                icon: React.createElement(UnorderedListOutlined),
                onClick: () => {
                    navigate("/tofu/instances/")
                }
            }
        ]
    }]

    return (
        <Layout>
            <Header style={{display: 'flex', alignItems: 'center'}}>
                <div className="demo-logo"/>
                <ApiKeyButton apiKey={apiKey} setApiKey={setApiKey}/>
            </Header>
            <div style={{padding: '0 48px'}}>
                {apiKey && <Breadcrumb
                    style={{margin: '16px 0'}}
                    items={breadcrumb}
                />}
                <Layout
                    style={{padding: '24px 0', background: colorBgContainer, borderRadius: borderRadiusLG}}
                >
                    {apiKey && <Sider style={{background: colorBgContainer}} width={200}>
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['instances']}
                            defaultOpenKeys={['tofu']}
                            style={{height: '100%'}}
                            items={sideMenu}
                        />
                    </Sider>}
                    <Content style={{padding: '0 24px', minHeight: 280}}>
                        {(apiKey && <Routes>
                            <Route index element={<Navigate to="/tofu/instances"/>}/>
                            <Route path="/tofu" element={<Navigate to="/tofu/instances"/>}/>
                            <Route path="/tofu/instances"
                                   element={<TofuInstanceList apiKey={apiKey} setBreadcrumb={setBreadcrumb}/>}/>
                            <Route path="/tofu/instances/:instanceId"
                                   element={<TofuInstanceDetail apiKey={apiKey} setBreadcrumb={setBreadcrumb}/>}/>
                        </Routes>) || <>
                            <Title>API Key Required</Title>
                            <Paragraph>Use the button above to enter your API key.</Paragraph>
                        </>}
                    </Content>
                </Layout>
            </div>
            <Footer style={{textAlign: 'center'}}>
                Copyright © 2021-{new Date().getFullYear()} SR2 Communications Limited.
            </Footer>
        </Layout>
    );
};

export default App;